统一修改UI库样式的几种方式

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ..2024-10-17 8:10

统一修改element组件库样式的几种方式。主题 | Element Plus

通过css变量设置
【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

javascript 复制代码

:root {
  --hc-text-color-placeholder: #5f84a2;
  --hc-text-color-regular: #fff;
  --hc-text-color-primary: #fff;
  --hc-bg-color-overlay: #002745;
  --hc-fill-color-blank: transparent;
  --hc-fill-color-light: #003c6a;
  --hc-border-color-extra-light: #003c6a;
  --hc-border-color-light: #0093ff;
}

通过scss变量
TODO
书写全局样式

修改组件图标
a. 通过组件实例

javascript 复制代码

// main.js
import {
  ElTooltip,
  ElDatePicker,
} from 'element-plus';
import SvgIcon from '@/components/svg-icon';

ElTooltip.props.effect.default = 'light';
ElDatePicker.props.prefixIcon.default = {
  render() {
    return h(SvgIcon, { name: 'date' });
  }
};

b. 通过iconfont

javascript 复制代码

// iconfont.css
.hc-select__caret:before {
  content: '\e61e';
}