统一修改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';
    }
相关推荐
江拥羡橙2 小时前
css实现拼图样式,响应不同屏幕宽度
vue·less·css3·html5·1024程序员节·calc
惜.己1 天前
从零使用vue脚手架开发一个简易的计算器
vue·js·1024程序员节
@AfeiyuO1 天前
el-table 表格嵌套表格
前端·elementui·vue
飞鸟真人1 天前
VUE+Electron从0开始搭建开发环境
electron·vue
你的电影很有趣2 天前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
社会底层无业大学生2 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
weixin_445476682 天前
Vue 项目全局水印功能完整实现指南
vue·vue2·1024程序员节
陶甜也3 天前
ThreeJS曲线动画:打造炫酷3D路径运动
前端·vue·threejs
梁辰兴3 天前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统