el-popover ::after style overwrite bug All In One
overwrite bug ❌
.table-custom-popover-class 與 .el-popper 或 .el-popper[x-placement^="top"]
類名同優先級
.table-custom-popover-class {
min-width: 30px !important;
width: auto !important;
font-size: 12px !important;
color: #FFFFFF !important;
background: #303133 !important;
.el-popper[x-placement^="top"] .popper__arrow,
.el-popper[x-placement^="top"] .popper__arrow::after {
border-top-color:#303133 !important;
display: none !important;
border-color: #303133 !important;
}
}
solution
CSS 優先級 bug,同級別的多個 class, 後面 class 會覆蓋前面的樣式, 導致前面的樣式失效 ✅
.custom-popover-class {
min-width: 30px !important;
width: auto !important;
font-size: 12px !important;
color: #FFFFFF !important;
background: #303133 !important;
}
.custom-popover-class .popper__arrow::after {
border-top-color:#303133 !important;
}
/*
.custom-popover-class.el-popper[x-placement^="top"] .popper__arrow::after {
border-top-color:#303133 !important;
}
*/
demo
refs
https://element.eleme.io/#/zh-CN/component/popover
https://codepen.io/xgqfrms/pen/OJxraVq
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 發佈文章使用:只允許註冊用戶纔可以訪問!
原創文章,版權所有©️xgqfrms, 禁止轉載 🈲️,侵權必究⚠️!