溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

elementui的el-popover修改樣式不生效的解決方法

發(fā)布時(shí)間：2021-07-01 08:57:09 來源：億速云 閱讀：1349 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“elementui的el-popover修改樣式不生效的解決方法”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在使用element-ui的時(shí)候，有一個(gè)常用的組件，那就是el-popover，但是element-ui官方文檔中樣式跟用法都比較局限，在使用時(shí)都需要改動樣式

項(xiàng)目中使用了el-popover，但是想修改一下樣式，一直不成功，先來看一下官方文檔怎么說的

elementui的el-popover修改樣式不生效的解決方法

添加一個(gè)類名，string類型，ok，添加一個(gè)

<el-popover
    placement="right"
    width="400"
    trigger="hover"
    popper-class="my-popover"
    >

去設(shè)置樣式

<style lang="scss" scoped>
	.my-popover{
		padding:20px;
	}
</style>

elementui的el-popover修改樣式不生效的解決方法

結(jié)果就是沒有設(shè)置成功！
是不是因?yàn)閟coped，不加scoped再試一下！

<style>
my-popover{
    padding:10px 30px;
}
</style>

elementui的el-popover修改樣式不生效的解決方法

還是沒有效果?。?！
經(jīng)過瘋狂試驗(yàn)以及網(wǎng)上搜索！
最終寫法是這樣,.el-popover.my-popover 這種格式，前綴是.el-popover ，不然不生效。且不能加上scoped

<style>
.el-popover.my-popover{
    padding:10px 30px;
}
</style>

elementui的el-popover修改樣式不生效的解決方法

修改成功！

“elementui的el-popover修改樣式不生效的解決方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手