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

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

解决方法

1、在原来的css样式下面,新编写一个不带scoped属性style,里面写需要修改的element-ui默认css样式。

  • 缺点:这样设置的是全局样式,意思就是如果你的项目里面有多个css需要修改,那么这么设置,两个地方都会被改变。

2、scss 模式 使用 >>> 箭头穿透
父类(或者更高级) >>> 需要修改的类

  • 缺点:有时候sass会不识别,从而不起效果。

3、less、sass 使用/deep/穿透
父类(或者更高级)/deep/ 需要修改的类

详:

先手直接说方法:在需要更改的组件里新增一个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。

おすすめ

転載: blog.csdn.net/m0_57349005/article/details/117792140