程序员经验分享-hwhale

element-ui 通过变量修改默认样式

2023-11-18

项目用的是 element-ui + vue

项目里有个需求是要修改 element 消息提示组件中 warning 类型的背景色和那个小感叹号的背景色

有两种方式，第一种比较简单，用 F12 找到想要修改的元素，直接覆盖对应样式。但考虑到有时候这个样式需要应用到多个组件，比如我需要同时修改如下图这几个组件的颜色，

这几个组件有的可能还会涉及到 hover 或者被选中时的特殊状态的颜色，那用第一种方法就显得太过繁琐，而且不容易覆盖所有场景。

这时候就可以用第二种方式，新建一个样式文件，例如 styleVariables.scss，用来覆盖ElementUI的样式，像官方文档中这样引入即可。

修改主题色或者统一的默认样式时可以在这个文件中通过修改变量的方式去修改，如：

$--color-primary: #409EFF;
$--color-warning: #E6A23C;
$--color-info: #909399;

变量的名字在 node_modules > element-ui > packages > theme-chalk > src > common > var.scss 中可以找到。这样通过变量修改的颜色就可以覆盖 element 组件的全部场景啦！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

问题整理

elementui

前端

element-ui 通过变量修改默认样式 的相关文章

  • 嵌入式linux屏幕显示,嵌入式Linux下竖屏显示配置

    摘要 目前大多数设备的显示器是横屏 例如高清分辨率1920 1080 笔记本14寸显示器1366 768以及最近很热门的 4K 分辨率3840 2160 另外一种则是竖屏显示器 常见于娱乐 广告设备 手机最为常见的竖屏设备 以及户外的广告牌

  • git命令全家福

    1 切换分支 git checkout dev 2 拉取远程分支到本地 并切换到该分支 git pull git checkout b dev 本地分支名称 origin dev 远程分支名称 3 查看分支 git branch a

  • 2018年最常见的Python面试题&答案（上篇）

    Q 1 Python有哪些特点和优点 作为一门编程入门语言 Python主要有以下特点和优点 可解释 具有动态特性 面向对象 简明简单 开源 具有强大的社区支持 当然 实际上Python的优点远不止如此 可以阅读该文档 详细了解 https

  • ubuntu安装svn服务器

    安装命令 sudo apt getinstall subversion 创建项目目录 sudo mkdir home svn cd home svn project sudo chmod R777 project 创建svn仓库 sudo

随机推荐

  • rbac 另外一种逃逸

    Privilege Escalation from Node Proxy Rights in Kubernetes RBAC aquasec com

  • mysql时间相减-时间运算-转换毫秒值的问题

    mysql时间运算 一 时间相减发现与结果差距很大 二 原因 三 正确的运算 一 时间相减发现与结果差距很大 mysql gt select t1 t2 t2 t1 from mytest t1 t2 t2 t1 2013 04 21 16

  • Spring4学习笔记：Spring框架中为一个bean配置依赖注入的方式

    Spring框架为一个bean配置依赖注入的四种方式 属性注入 构造方法注入 工厂注入 泛型依赖注入 1 属性注入 属性方法注入利用setXxx 方法注入 Bean 的属性值或者依赖对象 由于属性注入方式具有可选择性和灵活性高的优点 因此属

  • 【算法】深度优先搜索DFS 入门：基本知识+经典例题

    DFS最重要的是理清搜索顺序 ps 这是我入门dfs时写的博客 后来dfs渐渐熟练了 也补充了一些题目上去 带原题和代码 个人感觉整篇博文从上到下确实由易到难 代码也由开始的冗长变得渐渐精简 自学DFS看的视频 小甲鱼 讲原理 青岛大学 王

  • Linux / pthread_create() 函数所使用的线程函数为什么必须是静态函数？

    答案 因为 pthread create 函数要求的线程函数必须满足如下格式 void ThreadFunc void args 对于普通类成员函数 虚函数 他们实际上都是包含了调用他们的对象的 this 指针 即 经过编译器优化 线程函数

  • 【华为OD机试真题】对称字符串（C++&java&python）100%通过率 超详细代码注释 代码解读

    华为OD机试真题 2022 2023 真题目录 点这里 华为OD机试真题 信号发射和接收 试读 点这里 华为OD机试真题 租车骑绿道 试读 点这里 对称字符串 时间限制 1s空间限制 256MB限定语言 不限 题目描述 对称就是最大的美学

  • Period 【HDU - 1358】【KMP求周期】

    学习KMP算法可以参阅这篇文章 不懂的可以在线回答 题目链接 题意 我们想知道一串字符中的前缀中有多少最大周期数 例如 aaa 中 前两个 aa 最小周期长度为 a 所以周期长度为2 前三个 aaa 的最小周期也是 a 所以周期长度为3 再

  • 景深概念、计算方法与影响因素

    一 景深概念 景深 Depth of Field DOF 是指在摄影机镜头或其他成像器前沿能够取得清晰图像的成像所测定的被摄物体前后距离范围 而光圈 镜头 及拍摄物的距离是影响景深的重要因素 在聚焦完成后 焦点前后的范围内所呈现的清晰图像

  • caffe cudnn出现错误: declaration is incompatible with "const char *cudnnGetErrorString(cudnnStatus_t)"

    cudnn h中 inline const char cudnnGetErrorString cudnnStatus t status 修改为 inline const char CUDNNWINAPI cudnnGetErrorStrin

  • wallpaper Engine 安装教程

    今天在网上看到了一个软件wallpaper Engine 效果太酷炫了 就买了个来试试 效果是很棒 但是缺点是无法和桌面管理工具兼容 例如Fences 如果要二者兼得 则必须要PS辅助 运行环境 Windows7 Wallpaper Eng

  • GeckoDriver 国内镜像源加速下载

    GeckoDriver 国内镜像源加速下载 https mirrors huaweicloud com geckodriver

  • FastAPI从入门到实战（4）——路径参数与数值校验

    简单记录路径参数的类型 错误检查 自动填充 数据转换 解析 验证 包括数字大小范围的验证 参数别名 API 交互文档中传参演示等内容 一个伪静态请求 app01 get stu01 parameters def path params01

  • 模拟电子技术

    模电 半导体器件 二极管 1 半导体的基础知识 2 半导体二极管 场效应管三极管及其放大电路 1 绝缘栅型场效应管 MOSFET 2 结型场效应管 JFET 3 场效应管的主要参数 场效应管 放大电路 基本放大电路 差分式放大电路 集成运算

  • vue3 + gzip +nginx 部署 静态文件被识别成text/html的问题

    Failed to load module script Expected a JavaScript module script but the server responded with a MIME type of text html

  • java:面向对象(多态的主板示例)。

    需求 电脑运行实例 电脑运行基于主板 我们写这样一个代码 class MainBoard public void run System out println mainboard run class DuoTaiDemo4 public s

  • 玩转格式转换——.xml-＞.txt

    一个帅气的boy 你可以叫我 loVe 个人主页 l Ve的个人主页 如果对你有帮助的话希望三连 支持一下博主 VOC数据集转YOLO数据集 1 前言 2 分析xml txt数据 3 转换过程 4 最后结果对比 1 前言 最近学习Yolo

  • 友元成员函数使用时的注意事项

    友元成员函数的注意事项 友元的概念 友元 的概念其实是针对于类的私有成员来说的 一个类的由于封装的缘故 类体中私有成员是不可以被外界访问的 无论是继承也好 都是无法访问类内私有成员的 但是正是有那么一些人 愿意打破陈规破例访问类体内的私有成

  • linux下c/c++开发工具集

    clang llvm组合 lldb debugger 代码补全vim clang complete linux开发花环境 vim eclipse kscope kate kdevelop emacs win虚拟机 source insigh

  • Python excel数据处理之公式---openpyxl

    有些时候excel中直接通过公式进行计算比较方便 这样会比较简洁 并且下面代码也解决了excel读取单元格内容时 通过公式计算的值 为None的问题 咱们废话不多说 直接上代码 import sys import openpyxl from

  • element-ui 通过变量修改默认样式

    项目用的是 element ui vue 项目里有个需求是要修改 element 消息提示组件中 warning 类型的背景色和那个小感叹号的背景色 有两种方式 第一种比较简单 用 F12 找到想要修改的元素 直接覆盖对应样式 但考虑到有时

热门标签