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

Posted 2023-02-23

【中文标题】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);
;