关于element-ui的样式覆盖问题

Posted 2023-04-03 @李优秀

        在企业项目的实际开发中，组件所提供的样式有时是不能够完全满足实际的需求样式，比如：内外边距、组件背景色与原型图不符合等等。这时候我们就需要通过修改组件的内置Class值或者Id值来实现目的效果。

        所以，我总结了以下几种样式深度覆盖的方法来提供参考：

• ! important

CSS 中的 ! important 规则用于增加样式的权重。! important 与优先级无关，但它与最终的结果直接相关，使用一个 ! important 规则时，此声明将覆盖任何其他声明。

实例：

.myclass 
  background-color: gray !important;

• >>>、/deep/、::v-deep

三者都起到了样式深度覆盖的作用，但>>>只作用与css,因为sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。

实例：

<style scoped>
>>> .title
        color: #ff0;
    
</style>

<style scoped lang="scss">
/deep/ .title
        color: #ff0;
    
::v-deep .title
        color: #ff0;
    
</style>

• 新建一个<style></style>标签

当以上两种情况无法实现样式深度覆盖时，就需要新建一个<style></style>标签，进行样式覆盖。这是因为与<style></style>标签中scoped属性冲突了，但你如果不使用scoped会导致组件样式全局化。这时候就可以新建一个<style></style>标签来存放想要深度覆盖的标签样式（一个.vue文件允许多个style）。

<style >
.new_dialog .el-dialog 
    background-color: #E4E7ED;
    min-width:1104px;  

</style>

<style scoped>
.el-divider--horizontal 
    margin: 8px 0;
    background: 0 0;
    border-top: 1px dashed #e8eaec;

</style>

注意：

需要注意的是，你需要重新给你想要深度覆盖的标签赋予新的class值，以防样式渲染到其他界面的相同组件（使用element-ui的话，每个界面的所使用的组件的class值是一致的）。

Vue如何覆盖element-ui的css样式

【中文标题】Vue如何覆盖element-ui的css样式

【英文标题】：Vue how to override css styles for element-ui

【发布时间】：2021-08-09 11:14:51

【问题描述】：

我正在尝试从 element-ui 覆盖输入框的背景颜色 但从来没有工作过

<template>
<el-input v-model="form.text" type="text" clearable></el-input>
</template

<style lang="stylus" scoped>

.el-input__inner 
    background-color #f4f4f4

</style>

根据我从谷歌收集的信息

chrome dev tool snapshot

【问题讨论】：

尝试不使用scoped 属性

as @PierreSaid ，scoped 对你的 css 有一些神奇的作用，可以将它限定为组件，但你不希望这样，你想在没有范围的情况下对其进行样式化

谢谢各位，这已经困扰了我好几个小时了！ @KeithNicholas

这会为整个应用程序全局更改 elementUI 输入，而不仅仅是在您的组件中。如果这是有意的，我宁愿将这些更改放在单独的 main.css 文件中，而不是将它们隐藏在组件样式标记中。如果打算仅为该组件更改此输入框，则必须保留 scoped 并覆盖原始 .el-input__inner 类的特异性，例如通过 !important! 或加倍 (.el-input__inner.el-input__inner)。跨度>

如果你想使用范围样式最合适的方式来做到这一点，我们使用深度选择器：***.com/a/57704482/575468

【参考方案1】：

第一个选项： 尝试覆盖

.el-input__inner  
    background-color: #f4f4f4 !important;

第二个选项： 创建一个单独的 css 文件，在 element-ui 之后加载。

【参考方案2】：

在插件文件夹中打开 element.js。 在 element-plus 之后添加导入样式，如下所示：

import ElementPlus from "element-plus";
import "../element-variables.scss";
import "../assets/styles/global.scss"; // our custom styles

export default (app) => 
  app.use(ElementPlus);
;