vue修改Element UI样式,样式穿透

7 篇文章 0 订阅

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。这样在打包的时候会生成一个独一无二hash值,这样父组件的样式就不会影响到子组件了。
但是如果你要想修改子组件的样式,就只能修改公共的样式,这样的话其他使用这个组建的地方都会改变,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。
有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)

// 先用一个标签将这个组件包起来,然后通过父查子的方式来找到组件的类,注意是通过>>>来查找
<style scoped>
.box >>> .el-checkbox__inner { 
   border-radius: 50%;
  }
</style>

如果使用less或sass的方式来实现穿透,方法如下:

// less语法要通过/deep/ 来找到子级的类
<style scoped lang="less">
 .box {
  /deep/ .el-checkbox__inner{
   border-radius: 50%;
  }
 }
</style>

注:
其实还可以这么做,这种方法不推荐!

<style>
.boxonly .el-checkbox__inner { 
   border-radius: 50%!important;
  }
</style>

这样方法修改的是全局样式,通过提升样式的优先级来实现。先重新添加一个style标签,不加scoped,用一个标签将这个组件包起来,然后通过标签父子关系来约束只在当前位置起作用(定义的类名不要有重复),且你写的样式的优先级要高于组件的样式的优先级。
但是这样写有缺陷,当组件内的样式优先级也为最高的!important时还会有问题。

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Element UI 是一个基于 Vue.js 的组件库,其样式是通过 CSS 进行定义的。在使用 Element UI 进行开发时,经常会遇到需要自定义样式的情况,这时可以使用样式穿透的方式来实现。 样式穿透是指在子组件中通过一些特殊的 CSS 选择器,来修改父组件中的样式。在 Element UI 中,可以使用 `>>>` 或 `/deep/` 选择器来穿透样式。 举个例子,如果要修改一个按钮的背景色为红色,可以这样写: ```css /* 父组件中的样式 */ .el-button { background-color: green; } ``` ```vue <!-- 子组件中的模板 --> <template> <el-button class="my-button">Click me</el-button> </template> <!-- 子组件中的样式 --> <style scoped> .my-button >>> .el-button { background-color: red; } </style> ``` 上面的代码中,使用了 `>>>` 选择器来穿透 `.el-button` 组件,然后修改了其背景色为红色。注意,样式穿透只能在有作用域的情况下使用,因此需要在样式中加上 `scoped` 属性。 除了 `>>>` 选择器外,还可以使用 `/deep/` 选择器来实现样式穿透,两者的效果是一样的。例如: ```css <style scoped> .my-button /deep/ .el-button { background-color: red; } </style> ``` 需要注意的是,样式穿透虽然可以实现自定义样式的效果,但是也会增加样式的复杂度,可能会影响后续的维护和升级。因此,在实际开发中,应尽量避免使用样式穿透,而是优先考虑使用 Element UI 提供的自定义主题功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

濮家大少

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值