Vue how to override css styles for element-ui

user_15210562 0
Viewed 5137

I'm trying to override the background color on the input box from element-ui but never worked

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

<style lang="stylus" scoped>

.el-input__inner 
    background-color #f4f4f4

</style>

base on the information I gathered from google

chrome dev tool snapshot

element-ui vue.js
2 Answers

First option: Try to override

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

Second option: Create a seperate css file which is loaded in after the element-ui does.

user_104882470
  1. Open element.js in the plugins folder.
  2. Add import your styles after element-plus, like this:

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

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

user_74600380
Related