vue对于包含的html不起作用,Vuetify-CSS在组件内部不起作用（生效）

注意：请确保按照文档包括样式。

此外，如果组件损坏，请确保您的应用包含在v-app标记内：

//..

文档说：

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

解

像这样使用vue-loader的深度选择器 >>>：

情况1：

>>>.input-group__input {

background: red;

}

情况2：

>>>img {

width: 200px;

height: 200px;

}

因此，无需scoped从

关于预处理器的文档摘录(例如，如果您使用

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

注意：深度选择器已在v12.2.0

说明

在这两种情况下，CSS更改都不会生效，因为您要设置样式的元素不是组件的一部分，因此没有data-v-xxxxxxx属性，该属性用于在使用时对当前作用域(组件)中的元素进行样式设置

使用scopedattribute时，我们告诉vue仅将CSS应用于具有的元素data-v-xxxxxxx，而不应用于嵌套的元素。因此，我们需要显式使用深度选择器。

例如，如果#1渲染将如下所示：

// notice `data-v-61b4012e` here:

Name

// and notice no `data-v-61b4012e` here

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

// notice `data-v-61b4012e` here

// and no `data-v-61b4012e` on image

还是行不通？

如果您尝试覆盖某些样式(内联样式)，但此解决方案无效，则可能需要了解有关CSS特异性的更多信息。

虫子？

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