需求:
想给按钮icon和text改字体颜色,结果发现图标颜色并没有改变
.u-button{
width: 300rpx;
background-color: aliceblue;
color: #aaaa7f;
margin-top: 20rpx;
}
接下来用样式穿透解决
1、首先,给UI组件包裹一层view
<view class="time_btn">
<u-button icon="clock" class="timeBtn" @click="show = true">{{ chooseTime }}</u-button>
</view>
2、利用/deep/样式穿透
.time_btn{
.u-button /deep/ .u-icon__icon{
color: #aaaa7f !important;
margin-right: 15rpx !important;
}
}
完美解决!!!!!!