我们为什么要修改element-ui的样式,因为element-ui也不可能考虑的很全面,或者是我们觉的这个样式不太适合需要去修改样式的使用
普通修改的时候是:
直接可以去页面上找到我们需要修改的样式
然后把想要修改的样式拿到编辑器里面的,把scoped删除就可以修改了,这是不用sass,less,
如果使用sass,less的话需要把scoped加回来,并且需要使用穿透,
>>>>或者/deep/
在开发中我们发现修改elementUI样式的时候,添加了scoped的组件修改样式是无效的。
首先我们要了解一下scoped是什么?
官网是这样说的:
当< style >标签有scoped属性时,他的css只作用于当前组件的元素。
使用scoped后,父组件的样式不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的scoped CSS和子组件的scoped
CSS的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式
由于element的样式是全局引入的,所以你想在某个页面里面覆盖他的样式就不能加scoped。
方法一:
style中不加scoped,但是直接写在全局样式里,会污染全局样式,但是如果需要全局使用这个样式,可以写一个通用的样式全局使用
如果你只想覆盖单个页面element的样式,就需要使用下面的方法
方法二: 不加sco