el-dialog修改其样式不生效加deep也没用

最新推荐文章于 2025-02-13 17:42:33 发布
最新推荐文章于 2025-02-13 17:42:33 发布
阅读量436 收藏
点赞数 3
分类专栏： Vue3＋TS+ElementPlus项目开发 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35641191/article/details/144059593
版权

场景

el-dialog标签直接写在了template下。

解决方法

在template中先写一层div，包裹住el-dialog。

vue用sortablejs实现el-table表格行拖拽排序，在el-dialog中使用遇到的问题
coderYYY的博客
06-09 1157
使用sortable.js实现el-table行拖拽
el-dialog组件样式不生效踩坑
m0_59865308的博客
03-10 4559
这个也是我在网上找的，感谢大家的优秀共享。我也是不自信看官网，官网给了一个自定义添加类名的方法custom-class，css类名前要加/deep/，然后代码里面这样写： `<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" custom-class=“my_class” center> </el-dialog>` ` <style> /deep/ .m.
VUE3 无法修改 el-dialog 样式
oMangGuoBuDing1的专栏
08-21 1017
用下面这种方式修改 el-dialog 组件样式一点作用都没有，正常用这种方式修改 el 的el-button、tab等都是百试不爽的。最后找到解决办法和原因。在el-dialog外面套一层div。下不使用一个标签来包裹全部内容，而此时。父级元素标签，所以样式穿透也就无效了.的时候，在 html 的标签中会生成。就是利用的这个属性生成的css；而在 vue3 中，我们可以在。在第一层的情况下就没有对应的。
vue3的element-plus的el-dialog的样式修改无效问题
w710537643的博客
10-08 8027
本质原因是：页面中el-dialog的渲染位置不同，添加div就会在当前组件位置渲染，如果没有div，就会在中渲染。这个答案大家接受吗？在组件中中 把el-dialog放在一个div中，然后:deep(你要修改的元素class) ， 还有一个重要的前提是dialog中有一个属性append-to-body ，把这个属性设成false 或者不写才可以用深度选择器修改样式，这个属性就是把dialog插入到body中，不然就算包裹在div中依然是取不到样式。（vue2下深度选择器是有效的）
反思总结 -- el-dialog组件解决修改el-dialog__body样式不生效问题
m0_61480542的博客
01-31 2113
来修改样式, 如果这样写了还不生效, 找到最底层的index.html页面, 在该页面的style样式中写全局该样式。首先要通过custom-class="vDialog"设置dialog的class属性, 在通过。
elementui: el-dialog的header设置样式不生效
fury的博客
02-13 1047
style></style>中如果不添加scope,则其中的样式会在所有页面生效，所以务必给该el-dialog添加一个全局都不会重复的类名或者Id属性。如上：我想给header插槽增加下边框，并且想改变el-dialog__body盒子的内边距，但是不生效。el-dialog的header设置样式不生效。
el-dialog 修改样式不生效
08-16
在Vue的Element UI库中，`el-dialog`是一个用于创建弹出层组件，如果想要修改其默认样式而不生效，可能是以下几个原因： 1. CSS权重问题：确保你的自定义样式覆盖了Element UI的内置样式。检查是否在更深层级的CSS...
el-dialog 样式不生效
12-26
当尝试修改Element UI中的`el-dialog`组件样式时，如果发现样式未按预期生效，通常是因为作用域样式(`scoped`)的影响。为了使自定义样式能够正确应用到对话框上，可以采用以下几种方式： #### 方法一：移除 scoped ...
为什么el-dialog 中的 el-dialog__body 样式穿透不了
最新发布
03-13
此时需要注意的是，虽然这样做可以让样式生效于所有的 `el-dialog` 实例，但也可能会影响到不需要此样式的页面元素；因此建议总是尽可能地缩小选择器的作用域以避免不必要的副作用。 #### 注意事项 - 使用 `scoped...
【Element UI】解决 el-dialog 弹框组件设置 custom-class 样式不生效问题
qq_45677671的博客
10-07 5313
解决饿了么组件库 el-dialog 弹框组件设置 custom-class 样式不生效问题
element-ui修改el-dialog样式不生效
热门推荐
简析的博客
09-27 1万+
要修改dialog的样式不能直接在<style scoped>中修改，这样修改后不会生效。做法是把scoped去掉，然后在dialog标签上自定义一个class，最好不要和其他的class同名，然后通过此class选择器再去修改里面的相关样式即可。 <template> <el-dialog title="信息" :visible.sync="dialogFormVisible" width="60%"
el-dialog使用::v-deep()穿透设置样式不生效，解决办法亲测有效！
共同学习，共同成长
06-25 2359
在elementplus / elementui组件库的对话框组件中， el-dialog使用::v-deep()穿透设置样式不生效，解决办法！
el-dialog__body样式无效解决方案
YUE
05-13 3121
如果你用了穿透还是无效的话，那就是你用了scoped。在此style上方再加一个style即可解决。
解决修改el-dialog内的样式无效问题
furfur-jiang的博客
05-06 7792
修改dialog必须在非scoped环境下，可以在App.vue的样式写，并给需要加的dialog一个类名eg： /* 修改dialog必须在非scoped环境下 */ .createOrderDialog > div > div > div { margin-top: 15px; }
解决修改el-dialog__body样式无效的问题
qq_38858546的博客
09-28 5692
解决修改el-dialog__body无效的问题
修改el-table中某一行样式，解决修改样式无效的问题
Vivien_CC的博客
04-22 1122
列表展示项目信息，其中，根据后端接口字段返回的项目状态task_status，延期项目底色换成浅黄色，预警项目底色换成粉红色。① 在公共样式文件里面写好样式②在js文件里面写个样式对应的map③在vue文件中导入公共样式文件和js文件④在el-table中动态绑定row-class-name⑤在methods中写动态获取样式名的方法。
el-table增加/编辑打开el-dialog内嵌套el-form，解决编辑重置表单不成功等问题
请叫我欧皇！的博客
02-22 1498
需求：在做表格的增删改查，其中新增和编辑弹窗都是同一个弹窗，之后有个重置按钮，需要用户输入的时候可以重置清空等。本文章解决如下问题1.就是在编辑数据回填后点击重置表单没有清空也没有报错2.解决清空表单和表格数据相互影响问题3.解决新增和编辑数据相互影响问题，保留了只添加数据暂存功能。
Elementui设置样式不起效
qq_43750656的博客
11-14 5361
在使用ElementUI时，其渲染的dom元素有时是在模板外的，虽然代码写在了vue文件对用的模板内，但elementui在渲染的时候可能会渲染到和body一级。 如这种弹窗，有时候想给这种el-dialog加个样式，发现是不起效的，原因是 在写样式的时候加了scoped，也就是这些样式只对本组件内的dom元素有效，虽然el-dialog代码写在了本组件里，但真正弹窗渲染的时候，elementui不一定是在本组件渲染，所以此时样式就失效了。此时就需要写到全局样式里了。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值