vue中的css深度选择器v-deep 配合!important

娃哈哈哈哈呀2024-12-24 23:28

当 <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>