统一修改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';
    }
相关推荐
skyymrj10 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D10 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说10 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说10 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
sunbyte10 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·javascript·css·vue.js·vue
麦兜*10 天前
【node】Mac m1 安装nvm 和node
java·前端·vue.js·chrome·macos·vue·nvm
胡斌附体10 天前
关于vue.mixin与vue.use的用法分析
vue·区别·mixin·通用·use·生活类比
海的诗篇_12 天前
前端开发面试题总结-vue3框架篇(二)
前端·javascript·vue.js·面试·前端框架·vue
泓博12 天前
npm包冲突install失败
npm·vue
海的诗篇_12 天前
前端开发面试题总结-vue3框架篇(一)
前端·css·vue.js·面试·vue·html