统一修改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';
    }
相关推荐
weixin_443566985 小时前
天学网面试 —— 中级前端开发岗位
vue
YGY Webgis糕手之路13 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
aiguangyuan16 小时前
前端开发 Vue 组件优化
系统架构·vue·前端开发
YGY Webgis糕手之路18 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
pengzhuofan20 小时前
Web开发系列-第13章 Vue3 + ElementPlus
前端·elementui·vue·web
伍哥的传说3 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan3 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘3 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
今天不要写bug5 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201305 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox