vue 使用 /deep/ 修改样式

Posted 2023-03-23

参考技术A vue组件中，在style设置为scoped时，里面写的样式对子组件是不生效的，此时可以使用 /deep/ 深度选择器。（不使用scoped，/deep/不生效）

vue 修改样式添加!important不起作用怎么办？

1、sass和less的样式穿透 使用/deep/

即：外层 /deep/ 第三方组件

a. 当前的vue文件要加上lang和scoped属性

b 当前写的选择器优先级要大于组件内置的选择器

eg:

.wrapper /deep/ .ant-modal-body

background-color: #fff;



2、stylus样式穿透 使用>>>

外层 >>> 第三方组件

.wrapper >>> .ant-modal-body

background: #fff;



3、vue2.x 此方法无效

>>> .ant-modal-body

background-color:#fff;

olor:#606266;


转载：https://www.itqstars.com/blog/65

参考技术A 你在那个style里边儿加入一个scooped scooped这个限定一下，然后再写就有用了。