element ui自带样式不生效的解决办法（::v-deep也不生效）-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui自带样式不生效的解决办法（::v-deep也不生效）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述

一般在使用element ui 的时候需要修改其内置的样式，这个时候我们就要使用穿透了::v-deep 或者/deep/ 但是有时候这个也不生效，怎么办呢？

解决办法

第一步

我这里举个例子，比如时间选择器.el-time-panel的样式我无法修改穿透也不行，即便加上了！important也不行。这个时候查看官方文档，发现有一个默认的属性append-to-body 标识插入到body元素上，默认为true。这里设置为false

第二步

使用深度选择器在el-date-picker上加上 popper-class属性定义类别

 <el-date-picker
                style="width: 100%"
                v-model="agentForm.graceperiod"
                type="datetime"
                :placeholder="$t('AuthAgent.selectTime')"
                value-format="timestamp"
                :picker-options="pickerOptions"
                popper-class="date-class"
                :append-to-body="false"
                @change="handle"
              >
              </el-date-picker>

我这里是date-class 最后使用深层选择器就可以修改了

::v-deep .date-class{
    .el-time-panel {
    margin: 5px -23px !important;
}
}

先记录下来，后续再好好研究，经过以上步骤一定可以完美解决你的问题

最近又发现了一些类似的东西比如
tooltip中的【getPopupContainer】也是因为插到body上了所以无法修改样式这里改成这样的

:getTooltipPopupContainer="triggerNode => {return triggerNode.parentNode}"

antdsign a-popconfirm 也是这样添加这句话
···
:getPopupContainer=‘(triggerNode) => triggerNode.parentElement’
···文章来源地址https://www.toymoban.com/news/detail-509299.html

到了这里，关于element ui自带样式不生效的解决办法（::v-deep也不生效）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！