项目中如何修改element-ui的默认样式 (去除scoped,样式穿透 >>> , less/sass : /deep/)

我们为什么要修改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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值