html可视化布局工具_合肥房产信息网官网_关键词seo排名怎么样_下载百度手机助手

#创作灵感

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

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

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

1. 通过全局 CSS 覆盖样式

直接在你的全局样式文件（如 src/style/global.css 或 src/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>