如何局部覆盖element-ui的默认样式

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

最近项目中遇到的问题,只想在某个组件里面更改element-Ui的样式,而不影响全局。在网上看了很多瞎jb扯的东西,根本不适用或者没效果。

先手直接说方法:在需要更改的组件里新增一个style标签【重点:不要加scoped】,然后直接获取class设置样式就可以咯,class自己去浏览器里右键审查元素可得到。

建议:在获取到的样式里加上能限制范围的父层选择器,不然就变成全局样式咯。

<style>  .ruzhu-mess .el-form-item__label{    font-size:16px!important;  }  .zhuanye-mess .el-form-item__label,.zhuanye-mess .color-t{    font-size:16px!important;    color:#606266;  }</style><style lang="scss" scoped>   @import '../../../assets/scss/pages/organizationUserCenter1.scss'; </style>

如果还有兴趣学习的可以看下原理讲解:

scoped作用:控制style内css的作用域就是当前这个组件,那么它的原理是什么呢??

scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码:

<style scoped>.example {  color: red;}</style> <template>  <div class="example">hi</div></template>

转译后:

<style>.example[data-v-5558831a] {  color: red;}</style> <template>  <div class="example" data-v-5558831a>hi</div></template>

即:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom。

打个广告:
关注公众号 “enjoy的生活“ 给你推荐优秀的小说动漫游戏,帮你查找各种资源,学习网络技术。
 

点这里可以跳转到人工智能网站

发表评论