Vuetify - CSS 在组件内不起作用(生效) [英] Vuetify - CSS not working (taking effect) inside component
本文介绍了Vuetify - CSS 在组件内不起作用(生效)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
案例 1
我们正在尝试将自定义样式应用于呈现的 vuetify 元素:
<v-text-field v-model="name" label="Name"/></模板><样式范围>.input-group__input {背景:红色；}</风格>但是没有任何变化.<小时>案例 2
我们正在尝试为 v-html 呈现的元素设置样式(例如外部 html).例如，我们尝试在 img 上应用自定义宽度和高度，但它不起作用:
<div v-html="customHTML"></div></模板><脚本>导出默认{数据:() =>({customHTML:`<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;})}<样式范围>图像{宽度:200px；高度:200px；}</风格>如何将自定义 CSS 应用于这些元素?
解决方案
注意:确保按照 文档
此外，如果组件损坏，请确保您的应用程序包含在 v-app 标签中:
<v-内容>//..</v-content></v-app> 文档说:
<块引用>为了使您的应用程序正常工作，您必须将其包装在v-app 组件.
<小时>
解决方案
使用 vue-loader 的 深度选择器 >>> 像这样:
案例 1:
>>>.input-group__input {背景:红色；}情况 2:
>>>img {宽度:200px；高度:200px；}因此不需要从