el-popover ::after style overwrite bug All In One

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, 禁止轉載 🈲️,侵權必究⚠️!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章