問(wèn)題描述
一般在使用element ui 的時(shí)候需要修改其內(nèi)置的樣式，這個(gè)時(shí)候我們就要使用穿透了::v-deep 或者/deep/ 但是有時(shí)候這個(gè)也不生效，怎么辦呢？
解決辦法
第一步
我這里舉個(gè)例子，比如時(shí)間選擇器.el-time-panel的樣式我無(wú)法修改 穿透也不行，即便加上了！important也不行。 這個(gè)時(shí)候查看官方文檔，發(fā)現(xiàn)有一個(gè)默認(rèn)的屬性append-to-body 標(biāo)識(shí)插入到body元素上，默認(rèn)為true。 這里設(shè)置為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;
}
}
先記錄下來(lái)，后續(xù)再好好研究，經(jīng)過(guò)以上步驟一定可以完美解決你的問(wèn)題
最近又發(fā)現(xiàn)了一些類似的東西 比如
tooltip中的【getPopupContainer】 也是因?yàn)椴宓絙ody上了 所以無(wú)法修改樣式 這里改成這樣的文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-509299.html
:getTooltipPopupContainer="triggerNode => {return triggerNode.parentNode}"
antdsign a-popconfirm 也是這樣 添加這句話
···
:getPopupContainer=‘(triggerNode) => triggerNode.parentElement’
···文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-509299.html
到了這里，關(guān)于element ui自帶樣式不生效的解決辦法（::v-deep也不生效）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
