【问题记录】如何修改element中的el-dialog-body样式

<style lang="scss" scoped>
.el-dialog .el-dialog__body {
  padding-bottom: 28px;
}


// 正确写法,千万不能加这个scoped否则不生效,我也不知道为什么
<style lang="scss">
.el-dialog .el-dialog__body {
  padding-bottom: 28px;
}

解决办法:不管它原本写的什么直接写新的覆盖掉。

Vue 3中使用Element Plus库时,如果你发现给`el-dialog`的`el-dialog__body`设置不上样式,可能是由于以下原因: 1. **样式优先级问题**:Element Plus的样式优先级较高,可能覆盖了你的自定义样式。 2. **样式作用域问题**:Vue的单文件组件(SFC)默认使用样式作用域(scoped),这会导致样式只作用于当前组件。 以下是一些解决方法: ### 方法一:使用深度选择器 在Vue 3中,可以使用`::v-deep`选择器来穿透样式作用域,从而影响子组件的样式。 ```vue <template> <el-dialog> <div class="custom-body"> <!-- 你的内容 --> </div> </el-dialog> </template> <style scoped> .custom-body { /* 你的样式 */ } ::v-deep .el-dialog__body { /* 覆盖Element Plus的样式 */ padding: 20px; } </style> ``` ### 方法二:使用全局样式 如果你希望样式在全局范围内生效,可以在全局样式文件中进行覆盖。 ```css /* 在全局样式文件中,例如 main.css */ .el-dialog__body { padding: 20px; } ``` 然后在`main.js`中引入该样式文件: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import '路径/to/main.css'; createApp(App).mount('#app'); ``` ### 方法三:使用内联样式 如果样式不复杂,可以直接使用内联样式: ```vue <template> <el-dialog> <div class="custom-body" style="padding: 20px;"> <!-- 你的内容 --> </div> </el-dialog> </template> ``` ### 方法四:使用自定义类名 通过自定义类名来覆盖默认样式: ```vue <template> <el-dialog> <div class="custom-body"> <!-- 你的内容 --> </div> </el-dialog> </template> <style scoped> .custom-body { padding: 20px; } </style> ``` 然后在`el-dialog`组件中引用该类名: ```vue <el-dialog body-class="custom-body"> <!-- 你的内容 --> </el-dialog> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值