Home » vue » Disable Vuetify styles for Katex elements – Shared class names like .accent lead to style issues

Disable Vuetify styles for Katex elements – Shared class names like .accent lead to style issues

Posted by: admin November 26, 2021 Leave a comment

Questions:

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:

enter image description here

These are the vuetify styles:

enter image description here

This doesn’t work:

.v-application .accent {
  all: unset !important;
}

How can I disable all Vuetify styles for katex-elements?

Answers:

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>