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

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

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

   :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;
   }
   

2. 通过scss变量
   TODO
3. 书写全局样式
4. 修改组件图标
   a. 通过组件实例

   // 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

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