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

Question

案例一
我们正在尝试将自定义样式应用于呈现的 vuetify 元素：

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

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

但没有任何变化。

案例二
我们正在尝试为 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:

In order for your application to work properly, you must wrap it in a v-app component.

解决方案

像这样使用 vue-loader 的 deep selectors >>>：

案例 1：

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

案例 2：

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

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

关于预处理器的摘自 docs（例如，如果您正在使用 <style lang="scss" scoped>）：

Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.

注：深层选择器是implemented in 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>

还是不行？

如果您试图覆盖某些样式（内联样式）而此解决方案不起作用，您可能需要。

错误？
有可能即使您正确定位并使用深度选择器，该样式也不会像您期望的那样应用。检查渲染的html中的父元素之一是否有对应的data-v-xxxxxx 属性，当它没有应用时可能会有情况（错误），所以没有办法定位它通过范围 css。 One example was v-menu rendered by v-select，但以后可能会遇到其他类似的错误。

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

Vuetify - CSS not working (taking effect) inside component

vuetify.js

解决方案

说明

还是不行？