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;
}

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