随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

element-ui修改全局样式且只作用于当前页面


1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种: 

法一:使用关键字“/deep/”

1)在当前页面添加样式:

<style lang="scss" scoped>

自定义类名 /deep/{

element ui选择器类名{
样式
}
}
</style>

2)

:在其他页面写样式再导入到所需页面
scss文件写法:

.xx /deep/{

element ui选择器类名{
样式
}
}

.vue页面引入必须加上scoped:
<style lang="scss"  scoped>
@import "../../../styles/demo.scss";
</style>

 

法二:使用 ">>>" 也可实现相同效果(注意不要scss的预处理样式,否则也是没效果的)
<style  scoped>
.xxx >>> .el-checkbox__label {
color: red;
}

</style>

 

总之:有scss的地方一定要用deep;不用scss时就要用>>>

 

posted on   小虾米吖~  阅读(2101)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示