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

#创作灵感

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

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

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

1. 通过全局 CSS 覆盖样式

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

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

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

css 复制代码
.el-drawer__body {
  padding: 20px !important;
  background-color: #f5f5f5 !important;
}

2. 使用 Scoped 样式

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

java 复制代码
<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 添加自定义类名,并用该类名限制样式范围。

java 复制代码
<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>
相关推荐
@小红花37 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵40 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html