Vue中element组件自定义样式为何在子组件中无效？

本文共计964个文字，预计阅读时间需要4分钟。

目录 + Element组件中自定义组件的样式不生效 + 解决方法 + Element-UI修改样式不影响其他组件 + 需求描述 + 方法 + Element组件中自定义组件的样式不生效 + 当我们在项目中需要给Element组件添加一些自定义样式时，可能会遇到样式不生效的问题。

目录

• element组件中自定义组件的样式不生效
• 解决方法
• Element-UI修改样式不影响其他组件
• 需求描述
• 方法

element组件中自定义组件的样式不生效

当我们在项目中需要给element组件加上一些自定义样式的时候，往往是不生效的。

这是因为Vue项目中使用第三方框架的时候，Vue中有scoped，声明了样式是在组件范围内生效的，避免了不同组件的样式污染。

解决方法

1. 去掉scoped

这种方法确实可以实现效果，简单粗暴，却会造成不同组件样式污染，不建议。

2. 使用 /deep/ 深度修改标签样式

找到需要修改的 element标签的类名，然后在类名钱加上 /deep/ ，可以强制修改默认样式。