项目场景：

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

解决方案：

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

修改el-dialog
效果
修改el-message-box
效果

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/跟>>>快被淘汰了，不建议使用

# elementui # css3 # javascript
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊