全局重写样式

scss 全局变量维护

文件 src/scss/element-ui/element-variables.scss

/* 改变主题色变量 */
/* 主色 */
$--color-primary: #1dc779;
/* 辅助色 */
$--color-success: #66c23b;
$--color-warning: #ffb302;
$--color-danger: #f56c6c;
/* 中性色 */
$--color-text-primary: #20232a;
$--color-text-secondary: #818693;
$--color-text-placeholder: #bac0cd;
$--border-color-base: #d8dde3;
/* Radio 单选框 */
$--radio-checked-font-color: #20232a;
$--radio-checked-icon-color: #419eff;
$--radio-checked-input-border-color: #419eff;
/* Checkbox 多选框 */
$--checkbox-checked-background-color: #419eff;
$--checkbox-checked-font-color: #20232a;
/* 背景色 */
$--background-color: #f3f4f7;
$--color-white: #ffffff;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';
// 自定义样式
@import 'el-button';
@import 'el-input';

注意先后顺序 变量 -> 饿了么theme样式包 -> 复写自定义组件样式

全局覆盖样式

按钮、输入框、Tab控件、卡片 需要单独文件维护
如：radio 按钮组 src/scss/element-ui/el-radio-group.scss

.switch.el-radio-group {
  height: 40px;
  background: #cbcbde;
  border-radius: 8px;
  padding: 4px 5px 0px 5px;
  .el-radio-button.is-active {
    .el-radio-button__inner {
      background: #ffffff;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      height: 32px;
      border: 0px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #17233e;
      line-height: 14px;
    }
  }
  .el-radio-button__inner {
    background: #cbcbde;
    height: 32px;
    border: 0px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222e47;
    line-height: 14px;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-left: 0px;
  }
}