/deep/和::v-deep与:deep()
在vue中,我们为了避免父组件的样式影响到子组件的样式,会在 <style> 标签上设置scoped属性,这样它的 CSS 只会应用到当前组件的元素上,即使父组件中有跟子组件相同的class名称或者选择器的时候,也不会影响到子组件的样式。但是有的时候我们需要,我们需要在一个组件中改变被引入组件的样式,直接使用class命名改变样式没有任何反应,这种情况就需要使用/deep/或::v-d
·
在vue中,我们为了避免父组件的样式影响到子组件的样式,会在 <style> 标签上设置scoped属性,这样它的 CSS 只会应用到当前组件的元素上,即使父组件中有跟子组件相同的class名称或者选择器的时候,也不会影响到子组件的样式。
但是有的时候我们需要在一个组件中改变被引入组件的样式(即父组件改变子组件的样式),直接使用class命名改变样式没有任何反应,这种情况就需要使用/deep/或::v-deep了。
在scss中使用/deep/会报loader错误,这时可以使用::v-deep来代替
//单选框修改未点击时的边框颜色
/deep/ .uni-radio-input {
border-color: $uni-color-primary !important;
}
//单选框修改选中时的背景颜色
::v-deep .uni-radio-input-checked {
background: $uni-color-primary !important;
}
vue3中可以使用
//单选框修改选中时的背景颜色
:deep(.uni-radio-input-checked) {
background: $uni-color-primary !important;
}
额外介绍:>>>
只作用于css的深度选择器,对于less和scss不起作用,如果是less和scss的话需要用到/deep/或::v-deep
关于Vue3中deep简短的介绍
Vue3之前的官方说明没有找到
更多推荐
已为社区贡献1条内容
所有评论(0)