I'm using Katex together with Vuetify. There is a problem with certain classes like accent or overline used by both Katex and Vuetify. This leads to weird stylings like the one you can see below. The overline characters got my accent styling.
I used a vue-katex component like this:
<katex-element expression="\hat A \overline{B} \widetilde{\phi}" />
This is how the equation looks like:
These are the vuetify styles:
This doesn't work:
.v-application .accent {
all: unset !important;
}
How can I disable all Vuetify styles for katex-elements?
There's an open issue on the KaTeX github about this: https://github.com/KaTeX/KaTeX/issues/1456
You can either disable the Vuetify theme:
https://vuetifyjs.com/en/features/theme/#disable-theme
new Vuetify({
theme: { disable: true },
})
Or use web components to isolate the KaTeX CSS, such as katex-elements instead of vue-katex.
Just had the same problem and putting this into one of my Vue components that uses Katex fixed it for me:
<style lang="scss">
span {
.mord.accent {
background-color: inherit !important;
border-color: inherit !important;
}
}
</style>
Related
In my layout project I want to change layout color.
layout/default.vue
<v-app>
....
</v-ap>
I need to change v-app color, but this doesn't work:
<v-app color="secondary">
How can I do it?
note: I just want to use a Vuetify variable, like primary, secondary, accent, etc., and not CSS code.
i found it
in layout page i added this
#app {
background-color: var(--v-background-base) !important;
}
and in the nuxt config , in vuetify config
themes: {
light: {
background :'#eee'
},
dark :{
background :'#fff'
}
}
I am trying to give an element in my page a custom colour but all attempts are foiled by the Vuetify enforcing the important! on the component themes. I have followed the docs and tried:
v-list-item.selection(class="red--text")
and
v-list-item.selection(color="red")
then got desperate and tried
.selection {
color: red
}
and
.theme--light.v-list-item {
color: red
}
But the theme color just overrules everything by applying:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: rgba(0, 0, 0, 0.87) !important;
}
What do?
You can overwrite it by adding the same rule in your App.vue:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: red !important;
}
Or you can increase specificity by adding your own class to that element:
<div class="custom-list-item"></div>
...
.custom-list-item {
color: red !important;
}
Or you can specifically change color of all elements inside it, if it works for you:
.theme--light.v-list-item * {
color: red !important;
}
One might work (but not a good practice at all):
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled).selection {
color: red !important;
}
// it's more than Vuetify's style the `.selection` specificity
Edit:
The answer I gave above will not work if you use scoped style
As working around myself, and have read a comment here. I don't think change Vuetify's style in a Vuetify component is easy. Instead, by using a Vuetify's component, you should predefine the colors you'll ever use, and then you could use those colors in the components you want.
To workaround without configuring Vuetify, then you can:
Combine inline style + !important
<v-list-item style="color: red !important">Content</v-list-item>
Don't use Vuetify's component, use vanilla html (for this component) instead
Assuming I am using a plugin that generates html at runtime where I cannot edit the CSS or JS code, leaving me with the only option of overriding certain CSS in particular classes. For instance, in such case I'd often do:
.video-player{
max-height: 500px !important;
}
In case such styling must be handled conditionally based on the props passes to the component, for instance:
<videoPlayer :goSmall="anotherColumn != null"></videoPlayer>
since the CSS in the videoPlayer components must go in the Style tag:
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
how can I render it conditionally?
It is such a bad idea to append it to the DOM using lifecyle hooks, so please do not suggest anything like that.
Why not apply a specific class to the component instead of passing a prop?
<videoPlayer :class="{ small: anotherColumn != null }"></videoPlayer>
And the css
<style scoped>
.video-player.small {
max-height: 500px !important;
}
</style>
If you are not okay with dynamically applying CSS using lifecycle hooks. You can always box your components. Make two components for your videoPlayer, we'll call them videoPlayerOriginal and videoPlayerSmall.
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
Add your css in videoPlayerSmall.vue
//videoPlayerOriginal.vue
<videoPlayer></videoPlayer>
<style scoped>
.video-player{
max-height: 500px !important;
}
</style>
Now render either one of them conditionally.
I understand that with 'scoped' i can isolate css stylings to a component, so What's the difference between scoped and module in vuejs components? When should I use module over scoped?
According to the docs:
CSS Modules as an alternative for simulated scoped CSS
So, it's an alternative - It's also worth noting that scoped on a parent component means child components can't see the CSS but with module you can access this.$parent.$style.red to gain access to the styling.
It does however have the added advantage that you can then access your CSS from within your code:
<style module>
.red {
color: red;
}
</style>
<script>
export default {
created () {
console.log(this.$style.red)
}
}
</script>
I have two pages:
search.php that contains a vuejs component called search.vue
person.php that contains another component called person.vue.
In search.vue, I have links to person.php.
How come the styles set in the component search.vue also affect the DOM in person.vue?
The style tag in my search.vue component:
<style>
.row {
background-color: red;
}
</style>
There is nowhere I connect these two views except through the href link to open the person.php page.
Styles defined in the style tag of a Vue single-file-component will be compiled to a singular file, affecting all components.
But, you can specify a scoped attribute on the component's style tag:
<style scoped>
.row {
background-color: red;
}
</style>
From the Documentation:
The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover.
Note that the scoped attribute is a Vue feature for single-file-components, different from the general scoped style tag attribute, which has a similar effect but is currently only supported by Firefox.