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

Question

我正在尝试从 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 开发工具快照

Answer 1

1. 在插件文件夹中打开 element.js。
2. 在 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);
};

Answer 2

第一个选项： 尝试覆盖

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

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