统一修改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';
   }