在VueJS中重写子组件的内部类星体组件CSS
在VueJS中重写子组件的内部类星体组件CSS
提问于 2020-01-21 03:37:01
我正在使用VueJS中的quasar组件来制作一个应用程序。我在parent component中导入了一个子组件。对于该子对象，我通过直接访问其style标记中的quasar类覆盖并应用了自定义css。问题是在父类中导入子类后，父类css应用于子类。即使我使用作用域、模块或深度，它也没有效果，因为我想要更改类星体组件的内部根css。
我还尝试在created()中将孩子的样式设置为运行时，但没有任何效果，也不接受!important关键字。
有没有办法在类星体组件的根/内部css上应用自定义子css，而不让父css应用在子组件上？请帮帮忙。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-07 17:57:29
你必须从你的style标签中移除scope字段，然后你才能覆盖quasar类。因为当您有作用域时，框架会将散列代码附加到您样式中的所有类和id名称，并且您的类名已经更改。
Stack Overflow用户
发布于 2020-08-09 17:07:36
您可以使用v-deep覆盖样式部分中的Quasar类。
<style scoped lang="scss">
.q-item {
&::v-deep {
.q-item__label {
font-size: 18px;
}
}
}
</style>请注意，您的第一个类(在我的示例中为.q-item)必须是您使用的Quasar组件的给定类。如果你使用q-item组件，并且Quasar在里面放置了q-item__label，并且在它里面放置了q-item__ something...使用q-item作为v-deep上面的第一个参数，就像我的例子中一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59829853
复制相关文章
相似问题
腾讯云开发者
