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

最新推荐文章于 2022-06-03 22:03:19 发布

转载最新推荐文章于 2022-06-03 22:03:19 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zouwangblog/p/11141082.html

本文介绍两种在Vue项目中仅针对特定页面修改Element-UI组件样式的技巧，避免全局样式污染。一种是通过新增style标签并指定class，另一种利用scoped和>>>进行样式穿透。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中遇到的问题，只想在某个页面里面单独更改element-ui的样式，而不影响全局

有两种方法：

新增style标签

在需要更改的组件里新增一个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>

使用 scoped和 >>>进行穿透覆盖

一样需要添加一个父层选择器

<style scoped> 
.charge-success >>> .el-dialog__body {
    height: 85%;
    padding: 5%;
  }
</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。

转载于:https://www.cnblogs.com/zouwangblog/p/11141082.html