修改ElementUI默认样式最直接有效的方法

项目场景：

做项目的过程在难免会遇到要修改ElementUI的默认样式

---

解决方案：

方式一：全局修改 写一个单独的CSS文件，里面直接用element自带得类名进行样式修改（部分需要添加 !important）。这种方法会将整个项目用到的该组件样式全部修改了。一般用来放公共样式，如表格、弹框、表单会用到。

css文件单独在main.js中引入就可以了

import "./style/reset.css";

---

方式二：组件内修改 单独在要修改的组件内再写一对标签，不要加scoped。 然后在里面直接修改样式就行，为了防止可能影响到其他组件的样式，建议加一层父盒子的类名。例如：我想修改类名为login-form的盒子内的 input 样式

      <div class="login-form">
        <el-form ref="form" :model="form">
          <el-form-item>
            <el-input
              placeholder="身份证号码"
              prefix-icon="el-icon-user"
              v-model.trim="form.name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model.trim="form.password"
              autocomplete="off"
              type="password"
              @keypress.native.13="login"
            />
          </el-form-item>
          <el-form-item>
            <div :underline="false" style="float: right;cursor: pointer;">
              忘记密码?
            </div>
          </el-form-item>
          <el-form-item>
            <div class="clickLogin" @click="login">登录</div>
          </el-form-item>
        </el-form>
      </div>

    .login-form {
      .el-input__inner {
        color: #999;
      }
    }

如果不生效，也请加上 !important

/deep/跟>>>快被淘汰了，不建议使用