通过样式穿透可以修改其他组件内部的元素的样式。
首先找到要穿透的元素(可以通过浏览器的调试工具找到),使用 ::v-deep 或者 /deep/ 后面再跟上要穿透的元素,使用!important设置优先级(否则优先级不够,设置的样式不生效)。这里的重点就是找到要修改的元素,找到了才能修改。
示例:
我们想让uview组件库的tabs标签可以看到我们设置的背景图片,正常情况下是看不到的,因为它有背景色,会遮住我们的背景图片,我们可以使用 样式穿透设置tabs的背景颜色为透明。
现在要找到我们要修改的元素并修改它。
使用浏览器自带的调试工具我们可以发现是class为u-tabs的元素里设置了背景颜色,那我们把它设置为透明就行了 。
::v-deep .u-tabs {
background-color:transparent!important;
}
这样我们就可以从tabs标签看到我们的背景图片。