iview和elementUI是我們在用vue開發項目時比較常用到的ui組件,在我們使用第三方UI組件庫開發時有時需要對這些組件進行一些樣式修改。
爲了vue頁面樣式模塊化,不對全局樣式造成污染,我們往往都會加入scoped屬性用來限制樣式的作用域,然而這也會導致當我們修改部分ui組件樣式失效。爲了避免這種情況,我們常用以下方式來解決。
一、新建一個不含scoped的style標籤覆蓋組件樣式
不推薦使用,因爲如果命名衝突會導致其他樣式覆蓋異常
<style scoped>
/*頁面樣式*/
</style>
// ui組件覆蓋
<style>
.home .ivu-card-body {
height: 345px;
}
</style>
二、深度作用選擇器( >>> )
<style scoped>
.box >>> .content {
font-size: 20px;
}
</style>
三、/deep/ 預處理器less下使用
深度選擇器/deep/與>>>作用相同
<style scoped lang="less">
.select {
/deep/ .ivu-card-body {
width: 100%;
}
}
</style>
然而最近谷歌瀏覽器對於/deep/貌似不太友好,控制檯提示/deep/將要被移除。
[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.
所以我們也可以在less下另類調用>>>,如下:
// 採用的less的轉義和變量插值
<style scoped lang="less">
@deep: ~'>>>';
.select {
@{deep} .ivu-card-body {
width: 100%;
}
}
</style>
原文鏈接:https://blog.csdn.net/zqian1994/article/details/83899919