vue.js - 禁用 Katex 元素的 Vuetify 样式 - .accent 等共享类名称会导致样式问题

Question

我将 Katex 与 Vuetify 一起使用。Katex 和 Vuetify 使用的某些类（如重音或上划线）存在问题。这会导致奇怪的样式，就像您在下面看到的样式一样。上划线字符得到了我的重音样式。

我使用了这样的 vue-katex 组件：

<katex-element expression="\hat A \overline{B} \widetilde{\phi}" />

这是方程的样子：

这些是 vuetify 样式：

这不起作用：

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

如何禁用 katex-elements 的所有 Vuetify 样式？

Answer 1

KaTeX github 上有一个关于此的未解决问题：https ://github.com/KaTeX/KaTeX/issues/1456

您可以禁用 Vuetify 主题：
https ://vuetifyjs.com/en/features/theme/#disable-theme

new Vuetify({
  theme: { disable: true },
})

或者使用 web components 来隔离 KaTeX CSS，比如用katex-elements代替 vue-katex。

Answer 2

刚刚遇到了同样的问题，并将其放入我的一个使用 Katex 的 Vue 组件中为我修复了它：

<style lang="scss">
    span {
        .mord.accent {
            background-color: inherit !important;
            border-color: inherit !important;
        }
    }
</style>