您现在的位置是:首页 > 正文

Vant-UI库和Element-UI库修改样式无效

2024-02-01 02:54:29阅读 2
Vant-UI库和Element-UI库修改样式无效

最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效。css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用

.van-grid-item_content{
	background:#f4f5f7 !important;
    border-radius:8px;
}

vue项目中,当style标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。


解决办法:1.对于css语法起作用

使用深度选择器,使用 >>> 操作符,将scoped样式中的选择器“深入”,即影响子组件

<style scoped>
	.a >>> .b{/*...*/}
</style>

上述代码将会编译成:

<style scoped>
	.a[data-v-f3f3eg9].b{/*...*/}
</style>

2.对于scss,less这类的预处理器

使用 /deep/操作符取而代之——这是一个 >>> 的别名,代码如下:

/deep/ .van-grid-item_content{
    background:#f4f5f7;
    font-size:0.35rem;
}

这样修改样式就有效啦!!!

网站文章