elementUI中的样式无法修改

• 在Vue项目中想覆盖elementUI中的样式但是无效

    <span class="hljs-keyword">template</span>>
        <el-input class='example'></el-input>
    </<span class="hljs-keyword">template</span>>
  
    <style scoped>
    .example {
        width: <span class="hljs-number">200</span>px;
    }
    </style>
  

  原因是因为加了style标签中加了一个scoped标签 去掉就行了
  scoped 作用 当在style标签中加上scoped属性是,它的css作用域只在于当前组件的元素,它通过使用PostCSS来实现转换一下形式

  <span class="hljs-keyword">template</span>>
      <el-input class='example'></el-input>
  </<span class="hljs-keyword">template</span>>
  
  <style scoped>
  .example[_v-dsfa-<span class="hljs-number">2434</span>] {
      width: <span class="hljs-number">200</span>px;
  }
  </style>
  
  

• 它和我们传统的命名空间的方法避免css冲突没有什么本质性的区别。现在我们来说说怎么覆盖element-ui样式。由于element-ui的样式我们是在全局引入的，所以你想在某个view里面覆盖它的样式就不能加scoped，但你又想只覆盖这个页面的element样式，你就可在它的父级加一个class，以用命名空间来解决问题