vue.js - 如何禁用 Vuetify 的样式？

Question

我想将 markdown 解析为 html 并使用语法突出显示。

我的证监会如下:

<template>
    <div v-html="html"></div>
</template>
<script>
import marked from 'marked'
import hljs from 'highlightjs';

export default {
    name:"Article",
    props:['md'],
    computed:{
        html(){
            return marked(this.md)
        }
    },
    created: function () {
        marked.setOptions({
            langPrefix: '',
            highlight: function(code, lang) {
            return hljs.highlightAuto(code, [lang]).value
            }
        })
    },
}
</script>
<style src='highlightjs/styles/github-gist.css'></style>

生成的代码块如下所示:



这是 Vuetify 的风格。

https://vuetifyjs.com/en/styles/content/#code

我想禁用或覆盖它。

以下代码不适用于代码块:

<style scoped>
.v-application code {
    background-color: unset !important;
    color: unset !important;
    box-shadow: unset !important;
}
.myclass {
     color:red !important;
}
</style>

结果:

Answer 1

Vuetify 为 code 指定了以下 CSS标签:

.v-application code {
    background-color: #f5f5f5;
    color: #bd4147;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 
                0 1px 1px 0 rgba(0,0,0,.14),
                0 1px 3px 0 rgba(0,0,0,.12); 
}

如果您打开开发人员工具并检查 code，您可以看到这一点。在他们的网站上标记。

将这些值覆盖为您自己的值，或者将它们全部设置为 unset或 unset !important .例如:

.v-application code {
    all: unset;
    color: #eee
}

/* Or with increased specificity */
.v-application code.code--custom {
  all: unset;
  color: #eee
}