vue3修改elementui-plus的默认样式的几种方法

#创作灵感

今天写vue的前端项目,因为需要去修改elementui-plus中drawer的默认样式,所以刚好将修改步骤记录下来。

一共提供了三种方法,但亲测第二种最好用。

使用第二种是可以无视自己的代码中是否定义了该盒子,因为有时候盒子的出现和框架有关,并非你能左右的。

1. 通过全局 CSS 覆盖样式

直接在你的全局样式文件(如 src/style/global.csssrc/style/global.scss)中覆盖 .el-drawer__body 的样式。 

.el-drawer__body {padding: 20px;background-color: #f5f5f5; /* 自定义背景色 */font-size: 16px;
}

如果你的样式未生效,可能是因为 Element Plus 的样式优先级较高,可以使用 !important 来提升优先级:

.el-drawer__body {padding: 20px !important;background-color: #f5f5f5 !important;
}

2. 使用 Scoped 样式

如果你只想在某个组件中修改 .el-drawer__body 的样式,可以使用 Vue 的 scoped 样式机制。

<template><el-drawer :visible.sync="visible" title="Drawer Example"><div>内容部分</div></el-drawer>
</template><script>
export default {data() {return {visible: true,};},
};
</script><style scoped>
/* 使用深度选择器覆盖内部样式 */
::v-deep(.el-drawer__body) {padding: 20px;background-color: #f5f5f5;
}
</style>

3. 自定义类名

通过 class 属性为 el-drawer 添加自定义类名,并用该类名限制样式范围。

<template><el-drawer :visible.sync="visible" title="Drawer Example" custom-class="my-drawer"><div>内容部分</div></el-drawer>
</template><script>
export default {data() {return {visible: true,};},
};
</script><style>
/* 自定义样式,仅作用于带有 my-drawer 类名的 drawer */
.my-drawer .el-drawer__body {padding: 20px;background-color: #f5f5f5;
}
</style>

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

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

相关文章

Fiddler简单使用

Fiddler使用方法 1.作用 接口测试&#xff0c;发送自定义请求&#xff0c;模拟小型的接口测试定位前后端bug&#xff0c;抓取协议包&#xff0c;前后端联调构建模拟测试场景&#xff0c;数据篡改&#xff0c;重定向弱网测试&#xff0c;模拟限速操作&#xff0c;弱网&#xf…

如何通过递延型指标预测项目的长期成果?

递延型指标&#xff08;Deferred Metrics&#xff09;是指那些并不立即反映或直接影响当前操作、决策或行为的指标&#xff0c;而是随着时间的推移&#xff0c;才逐渐显现出影响效果的指标。这类指标通常会在一段时间后反映出来&#xff0c;或者需要一定的周期才能展现其成果或…

SpringCloud微服务实战系列:01让SpringCloud项目在你机器上运行起来

目录 项目选型 项目安装-本地运行起来 软件安装&#xff1a; 项目启动&#xff1a; 总结&答疑 项目选型 软件开发&#xff0c;基本上都不会从0开始&#xff0c;一般都是在其他项目或者组件的基础上进行整合优化迭代&#xff0c;站在巨人肩膀上才能看得更远&#xff0c…

分布式全文检索引擎ElasticSearch-数据的写入存储底层原理

一、数据写入的核心流程 当向 ES 索引写入数据时&#xff0c;整体流程如下&#xff1a; 1、客户端发送写入请求 客户端向 ES 集群的任意节点&#xff08;称为协调节点&#xff0c;Coordinating Node&#xff09;发送一个写入请求&#xff0c;比如 index&#xff08;插入或更…

【Linux 篇】Docker 容器星河与镜像灯塔:Linux 系统下解锁应用部署奇幻征程

文章目录 【Linux 篇】Docker 容器星河与镜像灯塔&#xff1a;Linux 系统下解锁应用部署奇幻征程前言一 、docker上部署mysql1. 拉取mysql镜像2. 创建容器3. 远程登录mysql 二 、docker上部署nginx1. 拉取nginx镜像2. 在dockerTar目录下 上传nginx.tar rz命令3. 创建nginx容器4…

第8章 搬移特性

8.1 搬移函数 模块化是优秀软件设计的核心所在&#xff0c;好的模块化能够让我在修改程序时只需理解程序的一小部分。为了设计出高度模块化的程序&#xff0c;我得保证互相关联的软件要素都能集中到一块&#xff0c;并确保块与块之间的联系易于查找、直观易懂。同时&#xff0c…

「九」HarmonyOS 5 端云一体化实战项目——「M.U.」应用云侧开发云数据库

1 立意背景 M. 代表 “我”&#xff0c;U. 代表 “你”&#xff0c;这是一款用于记录情侣从相识、相知、相恋、见家长、订婚直至结婚等各个阶段美好记忆留存的应用程序。它旨在为情侣们提供一个专属的空间&#xff0c;让他们能够将一路走来的点点滴滴&#xff0c;如初次相遇时…

【计算机网络】lab2 Ethernet(链路层Ethernet frame结构细节)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;各种软件安装与配置_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. …

“从零到一:揭秘操作系统的奇妙世界”【操作系统的发展】

1.手工操作阶段 此时没有OS&#xff0c;用户采用人工操作方式进行。 方式&#xff1a;程序员在纸带机上打孔---计算机读取---结果输出到纸袋机上---程序员取走结果 缺点&#xff1a;耗时长&#xff0c;难度大、用户独占全机、人机速度矛盾导致资源利用率低 2.单批道处理系统 引…

Base64在线编码解码 - 加菲工具

Base64在线编码解码 - 加菲工具 打开网站 加菲工具 选择“Base64 在线编码解码” 或者直接打开https://www.orcc.online/tools/base64 输入需要编码/解码的内容&#xff0c;点击“编码”/“解码”按钮 编码&#xff1a; 解码&#xff1a; 复制已经编码/解码后的内容。

python 配置 oracle instant client

1.问题描述 想用python连接oracle数据库&#xff0c;百度得知需要cx_Oracle这个第三方库 import cx_Oracle# 设置Oracle数据源名称 dsn cx_Oracle.makedsn(host, port, service_nameservice_name)# 创建数据库连接 connection cx_Oracle.connect(userusername, passwordpas…

GCNet的简述

其中了解self-attention知道他的计算量是 Global Context Attention计算量变少从变成 NL&#xff1a; (a)首先resize成CHW然后通过11的卷积生成q&#xff0c;k&#xff0c;v&#xff0c;然后q乘 变成HWHW&#xff0c;然后通过softmax进行归一化然后和v进行乘&#xff0c;再通…

高斯混合模型及最大期望算法(EM)聚类

混合高斯分布&#xff08;Gaussian Mixture Model&#xff0c;GMM&#xff09;是一种概率模型&#xff0c;用于表示具有多个高斯分布的加权组合的数据集。它被广泛应用于模式识别、聚类分析和密度估计等领域。 定义 混合高斯分布由多个单变量或多变量高斯分布的线性组合组成。…

stable diffusion学习01

ai的效果 ai绘画能画什么呢&#xff1f;理论上只要是能画出来的都能画。 ai绘画能做到的程度 能够通过文字描述生成图片在基础图片上重新绘制或修改一张图片&#xff0c;但ai绘画无法做到给一张图片画出无数张这个物体或人物的图片。 ai绘画在拥有足够的素材进行训练…

【容器】k8s学习笔记原理详解(十万字超详细)

Pod详解 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个&#xff1a; 可以以它为依据&am…

wazuh-modules-sca-scan

sca模块主函数wm_sca_main -> wm_sca_start 检查policy文件中的每一个项目wm_sca_check_policy static int wm_sca_check_policy(const cJSON * const policy, const cJSON * const checks, OSHash *global_check_list) {if(!policy) {return 1;}const cJSON * const id c…

图漾相机-ROS1_SDK_ubuntu版本编译(新版本)

文章目录 官网编译文档链接官网SDK下载链接1、下载 Camport ROS1 SDK1.下载git2、下载链接 2、准备编译工作1、安装 catkin2、配置环境变量3. 将Camport3中的linux库文件拷贝到 user/lib目录下4、修改lunch文件制定相机&#xff08;可以放在最后可以参考在线文档&#xff09;**…

基于单片机的智能窗帘(论文+源码)

1.系统设计 本课题智能窗帘系统的设计主要包括STM32单片机主控模块&#xff0c;光照检测模块&#xff0c;窗帘控制模块&#xff0c;键盘控制模块&#xff0c;显示模块和时钟模块等几个部分。总体设计框图如图2.1所示&#xff0c;其可以实现对当前光照强度的实时检测&#xff0…

召回系统介绍

一、以Lucene为例介绍召回系统 1、倒排检索 Lucene的倒排索引由 Term Index -> TermDictionary -> Posting List 三层组成&#xff0c;倒排检索实际上就是通过分词Term查询到倒排拉链&#xff0c;然后对所有拉链进行合并。 Term-> Posting List&#xff0c;可以直接…

Springboot实现自定义注解,接口返回自动增加字段

1、创建注解文件&#xff1a; package com.aiipc.dpm.api.annotation;import java.lang.annotation.*;Target(ElementType.FIELD) Retention(RetentionPolicy.RUNTIME) Documented public interface Echarts {/*** 单位* return*/String unit() default "";/*** 颜…