当 <style>
标签有 scoped
属性时,它的 CSS 只作用于当前组件中的元素,父组件的样式将不会渗透到子组件。 如果你希望 scoped 样式中的一个选择器能够作用得"更深",例如影响子组件,你可以使用深度选择器。
::v-deep { }
举个例子:
这是父组件
html
<view class="search-bar">
<fui-search-bar placeholder="请输入鉴定扣码搜索" ></fui-search-bar>
</view>
fui-search-bar 是子组件(内容如下)
html
<view class="fui-search__bar-icon">
<view class="fui-sbi__circle"></view>
<view class="fui-sbi__line"></view>
</view>
<text class="fui-search__bar-text">{{ placeholder }}</text>
例如 我想修改子组件的fui-search__bar-text元素 将字体颜色改为白色
就可以在父组件中使用 ::v-deep { } 配合!important
html
<style lang="scss" scoped>
// 第一种写法
::v-deep {
.fui-search__bar-text{
color: #fff !important;
}
}
// 第二种写法
:deep(.fui-search__bar-text){
color: red !important;
}
</style>