需求:
想给按钮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;}
}
完美解决!!!!!!