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’
···