开发mpvue小程序项目中 ,使用第三方插件vant webapp 的DatetimePicker 时间选择插件时,想要修改 选中项的样式,遇到了问题,按照官方文档 修改,但是 没起效果,经过一番处理,终于解决了。 先把方法记录如下,以便以后再遇到此类问题。
1.需求:
vant webapp 的 DatetimePicker 时间选择插件 默认选中行的字体颜色是 黑色,如下:
想要的效果是 默认选中行的字体颜色是蓝色,如:
在 不直接修改插件本身wxss样式的情况下,如何实现想要的效果???
2.解决方法
1.文档中有介绍,可以定义 active-calss 来实现。
2.页面引用时 添加 active-calss 和 active-calss定义类的样式
样式:
<style>
/**时间控件选中样式 */
.pickerItemSelected{
color:#4e70c7 !important;
}
/**要想自定义的 时间控件选中样式 起效果, 必须放在 全局样式里。不能放在被 scoped 修饰的style里*/
</style>
3.注意事项
注意:要想自定义的 时间控件选中样式 起效果, 必须放在 全局样式里。不能放在被 scoped 修饰的style里
下面的写法是不起效果的: