关于深度改变组件样式不生效问题_antdv deep不生效

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

在使用antd或element-ui需要改变组件样式时，一般情况下，会采用深度改变组件样式的写法。

如果是css,一般采用>>>的写法，示例如下：前面的类一般是后面组件的父类或祖先类。
如果是less或其他预处理语言，需要使用/deep/语法，一般使用如下示例：deep前面可以不用写类名，有时候使用deep可能会报错，可以改成::v-deep,用法与deep一致。
有时候会出现以上三种情况都不能生效的问题，这个时候需要考虑组件的样式是否是在嵌套的组件中了。某些情况是直接绑定在body上面的，所以如果设置了scoped属性，可能会被影响，如果不生效，可以尝试去掉scoped这一属性，但这并不是一个好的写法，一个文件中可以有多个style的标签，如果想要改变的某样式在scoped里面不生效，可以多加一个style标签，用于放置scoped不生效的样式，其他样式仍写在设有scoped的style标签内，避免相互影响。如果不是scoped影响，还可以考虑样式的权重问题。很多时候我们应该避免使用以上这些写法，因为使用这些写法，样式还会被编译一次，有时候嵌套太深还可能会影响性能。基于此，我们可以找到要更改组件的类命，然后将类命提取出来重写，同时要注意权重问题，以免不生效。
下图展示了两个style标签的用法：

使用Qt Designer 设计界面，但在Qt Designer里设置好样式表，使用快捷键 shift + alt + r 进行预览，样式都是正常的，但程序运行起来，样式就 不生效 了。两种解决方法：详情可以到文章里看一下。 https://blog.csdn.net/xiezhongyuan07/article/details/128802153 在 vue -elementui写项目时，时常elementui的效果不理想，但是又没办法直接修改elementui的样式因为我们无法通过普通的选择器获取到我们要更改的标签【elementui自己加了一层】, 通常的解决办法是在全局 css 中，寻找到我们要更改标签的class【elementui自定义的class】,但是这样的话，会影响到所有对应的标签，例如：我更改了el-input__inner的字体颜色,那么所有使用到的el-input颜色都会对应改变，这显然是不合理的审查元素的时候在.ant-popover-title里加上background-color:red;是有效的，但是我自己写代码的时候，这样写 / deep /.ant-popover-title{ background-color:red; 无效，折腾了半天，死活不起作用，最后查资料是把<style lang="less" scoped>里的scoped去掉，然后再把/ deep /去掉就可以了这样做影响了其他界面，但好歹对我这个项目没啥影响，可以这样用。查了更详细的资料后，发现popo.. 修改elementui 组件样式的方法有： 1.根据组件的属性传入相应的样式或者属性值来改变样式（具体属性参考官网）：如：可以通过:header-cell-style来设置表头单元格的样式，:rowStyle来设置表格每一行的样式 2.通过class 2.1 通过以下方式来改变 el-table标签下的表格偶数行的样式。注意：这个样式必须是全局的才会生效，即style标签不能加scoped,为了避免组件内的其他样式也成为全局样式，可以新建一个style标签放这些组件样式，其他的样式仍然放在style s 由上可知，: deep () 要生效必须在当前组件某节点下挂载情况下才生效。初步断定，: deep () 的作用是当前组件向下渗透，只要你在这个组件节点下面衍生，那么就会生效;当你垮出了对应的节点，自然就会失效( 样式写在父组件 : deep ，子组件写弹框，只要挂载在父组件衍生到子组件的所有节点皆可生效)。其实可以通过来辨别，相信大家都知道这个是什么意思：这是在标记 vue 文件中 css 时使用scoped标记产生的，因为要保证各文件中的 css 不相互影响，给每个component。