修改elementUI等UI组件样式的5种方法总结,哪些情况需要使用/deep/, :deep()等方式来穿透方法大全

文章目录

      • 方法 1:全局修改样式
        • 示例:修改 `ElMessage` 的背景色和字体颜色
      • 方法 2:修改特定类型的 `ElMessage` 样式-全局-不需要穿透
        • 示例:修改 `ElMessage` 成功类型的样式
      • 方法 3:通过 Scoped CSS 在组件内部修改-局部-不需要穿透
      • 方法 4:使用 JavaScript 动态修改样式-不需要穿透
      • 方法 5:通过组件的API配置修改 `ElMessage` 的默认样式-不需要穿透
      • 哪些情况需要使用/deep/, :deep()等方式来穿透
        • 什么时候需要使用 `/deep/` 或 `:deep()`?
      • 总结

Element UI 中,有时我们需要改写某些组件的样式,比如 ElMessageel-form等。

比如下面的需求:

它渲染后的DOM结构为:

image-20241106183234505

我这里总结了5种修改任意UI库组件的方法。也就是除了elementUI,也适用于antd,vant等UI库。

方法 1:全局修改样式

你可以在全局的 CSS 中,比如common.css等在main.js中导入的css文件中,直接根据渲染后的elementUI的组件样式来修改。

示例:修改 ElMessage 的背景色和字体颜色

如上图,ElMessage组件渲染后的结构,有个class='ell-message',可以直接在全局样式中改写规则。

/* 在 common.css等公共样式 或组件的 <style> 中添加 */
.el-message {background-color: #f0ad4e !important;  /* 更改背景颜色 */color: white !important;  /* 更改字体颜色 */border-radius: 5px !important;  /* 可选:修改圆角 */font-size: 16px !important;  /* 可选:修改字体大小 */
}

注意,可以通过!important; 来重置样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465333.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pandas——对齐运算+函数应用

引言&#xff1a;对齐运算是数据清洗的重要过程&#xff0c;可以按索引对齐进行运算&#xff0c;如果没对齐的位置则补NaN&#xff0c;最后也可以填充NaN 一、Series的对齐运算 1.Series 按行、索引对齐 import pandas as pds1 pd.Series(range(10, 20), indexrange(10)) s2…

# Ubuntu 达人九步养成记(1)

Ubuntu 达人九步养成记&#xff08;1&#xff09; 目录&#xff1a; 一、ubuntu基本安装 二、设置语言环境 三、设置服务器镜像源 四、在启动栏添加终端图标 五、使用apt更新和升级系统软件 六、使用apt安装软件 七、使用apt删除软件以及apt-get 八、deb格式及谷歌浏览…

优选算法第五讲:位运算模块

优选算法第五讲&#xff1a;位运算模块 1.常见的位运算总结2.判断字符是否唯一3.丢失的数字4.两整数之和5.只出现一次的数字II6.消失的两个数字 1.常见的位运算总结 2.判断字符是否唯一 链接: link class Solution { public:bool isUnique(string astr) {if(astr.size() >…

计算机视觉算法真的难学吗?这些技巧让你轻松掌握

在当今这个数字化迅猛发展的时代&#xff0c;计算机视觉作为人工智能的重要分支&#xff0c;正在逐渐改变我们的生活和工作方式。很多人可能会觉得计算机视觉算法难以掌握&#xff0c;尤其是在面对复杂的数学和编程时&#xff0c;常常会感到无从下手。不过&#xff0c;实际上&a…

基于YOLO11/v10/v8/v5深度学习的老鼠智能检测系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

机器学习—前向传播的一般实现

可以写一个函数来实现一个密集的层&#xff0c;那是神经网络的单层&#xff0c;所以定义稠密函数&#xff0c;它将上一层的激活作为输入以及给定层神经元的参数w和b。看下边图片所展示的例子&#xff0c;把所有这些权重向量堆叠成一个矩阵&#xff0c;wnp.array([[1,-3,5][2,4,…

高清烟花视频素材下载网站推荐

无论是庆祝节日、婚礼&#xff0c;还是各种欢庆活动&#xff0c;烟花总能瞬间点燃气氛&#xff0c;带来视觉上的震撼。在视频作品中加入绚丽的烟花瞬间&#xff0c;能够立刻提升画面的冲击力和节庆氛围。那么&#xff0c;高清烟花视频素材去哪下载呢&#xff1f;今天&#xff0…

Java异常体系结构

在Java编程中&#xff0c;异常处理是一个重要的概念。理解Java的异常体系结构以及如何捕获和处理异常&#xff0c;对于编写健壮的程序至关重要。本文将详细介绍Java异常体系结构的组成部分&#xff0c;以及异常的捕获和处理机制。 一、Java异常体系结构 Java的异常体系结构可以…

免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏

文末查看开源项目地址 Light Chaser 是一款国产开源免费的基于 React18、Vite5、TypeScript5 技术栈实现的 Web 可视化大屏设计工具&#xff0c;支持Docker方式部署&#xff0c;支持MySQL、PostgreSQL、SQL Server、Oracle 数据源。 你可以简单快速地搭建数据可视化展示、数据报…

【解决】Pico 串流 Unity 开发环境 Preview 黑屏问题

开发平台&#xff1a;Unity 6.0 开发工具&#xff1a;Pico SDK   一、问题描述 在 Unity 开发环境下运行 测试 PicoVR 表现时&#xff0c;出现 Game视窗 PicoVR投屏 呈现黑屏效果。详细背景如下&#xff1a; UnitySwitch PlateformPICO Integration SDKPICO Live Preview6…

pytest高版本兼容test_data[“log“] = _handle_ansi(“\n“.join(logs))错误

一、问题现象&#xff1a; 执行seleniumpytest结束时报: INTERNALERROR> File "D:\workspace\pytestframe\.venv\Lib\site-packages\pytest_html\report_data.py", line 141, in add_test INTERNALERROR> test_data["log"] _handle_ansi(&q…

编译工具与文件学习(一)-YAML、repos、vcstoolcolcon

YAML YAML&#xff08;YAML Ain’t Markup Language&#xff09;是一种人类可读的数据序列化格式&#xff0c;常用于配置文件、数据交换和存储结构化数据。YAML 的设计目标是简洁、易读&#xff0c;并且能够表示复杂的数据结构。 YAML 文件的基本语法 基本结构&#xff1a; Y…

信息学科平台系统构建:Spring Boot框架深度解析

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

从传统服务器到虚拟化:虚拟机 VM 如何改变计算游戏规则?

目录 VMware 数据中心虚拟化入门Ⅰ—— 虚拟机 Virtual Machine&#xff08;VM&#xff09;1. 虚拟机 Virtual Machine, VM阅读本文后可以获得以下信息1.1 什么是虚拟机问题思考&#xff08;1&#xff09;从传统服务器到虚拟化服务器&#xff08;2&#xff09;问题&#xff1a;…

双向链表及如何使用GLib的GList实现双向链表

双向链表是一种比单向链表更为灵活的数据结构&#xff0c;与单向链表相比可以有更多的应用场景&#xff0c;本文讨论双向链表的基本概念及实现方法&#xff0c;并着重介绍使用GLib的GList实现单向链表的方法及步骤&#xff0c;本文给出了多个实际范例源代码&#xff0c;旨在帮助…

MySQL 数据库之库操作

文章目录 1. 什么是数据库2. 基础概念2.1 连接数据库2.2 服务器&#xff0c;数据库&#xff0c;表关系2.3 SQL分类 3. 库的操作3.1 创建&#xff0c;选择&#xff0c;查看数据库3.2 字符集和默认校验规则 3.3 操纵数据库3.3.1 数据库查看3.3.2 数据库删除3.3.3 数据库修改 4. 其…

Windows安装多个NodeJS版本

下载nvm管理工具&#xff0c;下载完成解压安装 https://github.com/coreybutler/nvm-windows/releases 选择nvm安装位置 选择nvm安装node版本的安装位置 如果提示你已经安装的有nodejs&#xff0c;提示你是否通过nvm管理nodejs&#xff0c;选择是&#xff0c;继续安装即可…

使用NVM自由切换nodejs版本

一、NVM介绍 在日常开发中&#xff0c;我们可能需要同时进行多个不同NodeJS版本的项目开发&#xff0c;每个项目所依赖的nodejs版本可能不一致&#xff0c;我们如果只安装一个版本的nodejs&#xff0c;就可能出现node版本冲突问题&#xff0c;导致项目无法启动。这种情况下&am…

parseInt 是一个内置的 JavaScript 函数,用于将字符串转换为整数。

parseInt(options.checkNumber, 10) 中的 10 表示将字符串转换为十进制整数。 解释 parseInt 函数&#xff1a; parseInt 是一个内置的 JavaScript 函数&#xff0c;用于将字符串转换为整数。它有两个参数&#xff1a; 第一个参数是要转换的字符串。第二个参数是转换时使用的基…

Qt中的Model与View 4:QStandardItemModel与QTableView

目录 QStandardItemModel API QTableView 导航 视觉外观 坐标系统 API 样例&#xff1a;解析一个表格txt文件 QStandardItemModel QStandardItemModel 可用作标准 Qt 数据类型的存储库。它是模型/视图类之一&#xff0c;是 Qt 模型/视图框架的一部分。它提供了一种基于…