解决方案

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

注意：请确保包括符合docs
的样式另外，如果组件损坏，请确保您的应用包裹在v-app标记内：

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

Documentation says：

为了使您的应用程序正常运行，必须将其包装在 v-app组件。

解决方案

使用vue-loader的{{3}} >>>就像这样：

情况1：

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

情况2：

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

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

deep selectors中有关预处理程序的摘录（例如，如果您使用的是<style lang="scss" scoped>）

某些预处理器（例如Sass）可能无法正确解析>>>。在这些情况下，您可以改用/deep/组合器-它是>>>的别名，并且工作原理完全相同。

注意：深度选择器为docs

说明

在这两种情况下，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>

仍然无法正常工作吗？

如果您尝试覆盖某些样式（内联样式），但此解决方案无效，则可能需要implemented in v12.2.0。

错误？
即使您正确定位并使用深度选择器，也可能未如您所愿地应用该样式。检查渲染的html中的父元素之一是否具有coresponding data-v-xxxxxx属性，如果未应用该属性，则可能会出现情况（错误），因此无法通过有范围的CSS对其进行定位。 see more about CSS specificity，但将来可能会遇到其他类似的错误。

Vuetify-CSS在组件内部不起作用（生效）

1 个答案:

解决方案

说明

仍然无法正常工作吗？