在开发Vue时,经常遇到无法修改,外部导入的组件的样式问题。原因就在于,我把每个style
都加了一个 scoped
的作用符
那么怎么解决这个问题呢:
- 不使用
scoped
这个作用符 - 使用vue的深度选择器
什么是深度选择器呢?
当 <style>
标签有 scoped
属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 深度选择器
怎么使用 深度选择器
- 原生的CSS:
>>>
.a >>> .b { /* ... */ }
- less预处理器:
/deep/
/deep/ .dh-button:first-child{
margin-right: 20px;
}
- scss预处理器:
::v-deep
::v-deep .dh-button:first-child{
margin-right: 20px;
}