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

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

  1. 通过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;
    }
  2. 通过scss变量
    TODO

  3. 书写全局样式

  4. 修改组件图标
    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';
    }
相关推荐
是梦终空11 小时前
计算机毕业设计241—基于Java+Springboot+vue的爱心公益服务系统(源代码+数据库+11000字文档)
java·spring boot·vue·毕业设计·课程设计·毕业论文·爱心公益系统
麦麦大数据19 小时前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
七仔的博客21 小时前
Vue视差标题背景
vue·博客·动画·视差
梁辰兴21 小时前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
Olrookie1 天前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
duansamve1 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
java_强哥2 天前
vue3-tree-org实现组织架构图展示
vue
huangyiyi666662 天前
轮询那些事儿
javascript·前端框架·vue·js
七仔的博客2 天前
博客的加载速度和大小的优化、优化再优化
vue·博客·优化·gzip·live2d
duandashuaige3 天前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html