scoped属性与 element-ui 样式

1 、vue 文件中 style 标签内 scoped 后，有时候需要修改 elemet-ui 控件样式，但是发现不成功。

  想找到解决方案，首先来看看不生效的原因

  1)、首先，scoped 是如何实现局部样式的？

   查看 vue-loader 文档，根据文档可以知道，当 <style> 标签有 scoped 属性时，会对组件内的元素加上一个类似于 data-v-f3f3eg9 的独特标签，组件内的样式只会对带有这个标签的 DOM 元素生效，因此加上 scoped 后，组件内的样式不会影响组件外。

 2)、那 scoped 为什么对第三方子组件内的 dom 元素不生效

   子组件的根元素

      使用 scoped 后，父组件的样式将不会渗透到子组件，不过一个子组件的根节点会同时受其父组件的 scoped 和子组件的 scoped CSS 的影响。这样设计时为了让父组件可以从布局的角度出发，调整其根元素的样式。

      这段话，也就是说采用 scoped 后，对组件A内采用的子组件，只会对其根元素加上组件A的独特标签，因此对子组件的根元素改变样式能生效，而对非根元素是不生效的。

 

例、

<div class="test">
    <el-button>按钮</el-button>
</div>

<style lang="less" scoped>
.test{
  .el-button span{
    background:red;
  }
}
</style>

 

   上图中 data-v-5752faac 是当前组件 test 的独特标签（其他是父元素带上的，这里忽略），可以看到子组件 el-button 带上了此标签，而非根元素 span 没带上，因此对 span 的修改是不生效的，此时如果手动在span元素上加上 data-v-5752faac，会发现样式生效。

 

解决方案：

方案一、 加上一个非 scoped 样式

<style>
.test{
  .el-button span{
    background:red;
  }
}
</style>

<style scoped>
/* 本地样式 */
</style>

 

方案二、采用深度选择器，组件的样式可以渗透到子组件相应的元素上

 1、  >>>

 2、deep（less语法中）、

 3、/deep/（sass语法中）选择器