Vuetify - CSS在组件内部不起作用(生效)

Question

案例1
我们正在尝试将自定义样式应用于渲染的vuetify元素:

<template>
    <v-text-field v-model="name" label="Name" />
</template>

<style scoped>
.input-group__input {
    background: red;
}
</style>

但没有变化.

---

案例2
我们正在尝试设置由v-html(例如外部html)呈现的元素的样式.例如,我们尝试在其上应用自定义宽度和高度img,但它不起作用:

<template>
    <div v-html="customHTML"></div>
</template>

<script>
export default {
    data: () => ({
        customHTML: `<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;
    })
}
</script>

<style scoped>
img {
    width: 200px;
    height: 200px;
}
</style>

如何将自定义CSS应用于这些元素？

Answer 1

注意:确保按照文档包含样式
.如果组件损坏,请确保您的应用程序包含在v-app标记内:

<v-app> 
    <v-content>
    //..
    </v-content>
</v-app>

文件说:

为了使您的应用程序正常工作,您必须将其包装在 v-app组件中.

解

使用vue-loader的深选择 >>>,如下所示:

情况1:

>>>.input-group__input {
    background: red;
}

案例2:

>>>img {
    width: 200px;
    height: 200px;
}

因此无需scoped从<style>标记中删除属性.

关于预处理器的文档摘录(例如,如果您正在使用<style lang="scss" scoped>):

某些预处理器(如Sass)可能无法>>>正确解析.在这些情况下,您可以使用/deep/组合器 - 它是别名>>>并且工作完全相同.

注意:深度选择器已实现v12.2.0

说明

在这两种情况下,CSS更改都不会生效,因为您尝试设置样式的元素不是组件的一部分,因此没有data-v-xxxxxxx属性,该属性在使用时用于当前范围(组件)中的样式元素<style scoped>.
当使用scoped属性时,我们告诉vue仅将css应用于具有data-v-xxxxxxx但不是嵌套元素的元素.因此,我们需要明确使用深度选择器.

例如,如果#1渲染<v-text-field>将如下所示:

// notice `data-v-61b4012e` here:
<div data-v-61b4012e class="input-group input-group--text-field primary--text">
    <label>Name</label>
    <div class="input-group__input"> // and notice no `data-v-61b4012e` here
        <input tabindex="0" aria-label="Name" type="text">
    </div>
    <div class="input-group__details"></div>
</div>

如果#2渲染v-html看起来像这样:

<div data-v-61b4012e> // notice `data-v-61b4012e` here  
    // and no `data-v-61b4012e` on image
    <img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">
</div>

还是行不通？

如果您尝试覆盖某些样式(内联样式)并且此解决方案不起作用,您可能希望了解有关CSS特异性的更多信息.

错误？
有可能即使您正确定位并使用深度选择器,样式未按预期应用.检查渲染的html中的某个父元素上是否存在相应的data-v-xxxxxx属性,可能存在未应用的情况(错误),因此无法通过作用域css来定位它.一个例子是由v-select呈现的v-menu,但未来可能会遇到其他类似的bug.