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

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

項目中使用瞭el-popover，但是想修改一下樣式，一直不成功，先來看一下官方文檔怎麼說的

在這裡插入圖片描述

添加一個類名，string類型，ok，添加一個

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

去設置樣式

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

在這裡插入圖片描述

結果就是沒有設置成功！
是不是因為scoped，不加scoped再試一下！

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

在這裡插入圖片描述

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

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

在這裡插入圖片描述

修改成功！

到此這篇關於elementui的el-popover修改樣式不生效的解決的文章就介紹到這瞭,更多相關el-popover 樣式不生效內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！