vue组件样式添加scoped属性之后，无法被父组件修改。或者无法在本组件修改element UI样式...

在vue开发中，需要使用scoped属性避免样式的全局干扰，但是这样在父组件中是无法被修改的，不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式，因为权重问题。但是想要修改还是有方法的：

1. 在不去掉scoped的情况下，在全局样式中覆盖，这种解法，有弊端，可能会污染全局样式。

2.使用深度作用选择器，可以通过vue-loader提供的新写法  vue-loader 写法如下（先安装，在使用）：

<style scoped> .a >>> .b { /* ... */ } </style>

某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用/deep/组合器 - 它是别名，>>>并且完全相同。

<style scoped lang="scss">
　　.form {
　　　　background-color: #fff;
　　　　/deep/ .list{
　　　　　　font-size: 18px;
　　　　}
　　}
</style>
sass注意要用 /deep/ ,而无法使用 >>> 这个符号。

通过 v-html 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式 。

 

转载于:https://www.cnblogs.com/wangmaoling/p/9827428.html