vant-weapp Radio label 自定义文本颜色不生效

rn0zuynd  于 2023-03-19  发布在  Vant
关注(0)|答案(3)|浏览(931)

重现链接

Vant Weapp 版本

1.10.13

描述一下你遇到的问题。

通过label-class 自定义也没有生效 其他样式可以生效 字体颜色无法生效

重现步骤

如上所示

设备/浏览器

No response

7fyelxc5

7fyelxc51#

解决方案(推荐第二种方式):
关于方式1的更多细节请查看官方文档;
关于方式2:因为我在 radio 的源码中看到 radio 组件的 label 部分代码其实有一个 slot,所以就直接添加一个 text 标签,可能官方也考虑到这种需求了?虽然官方提供了一个叫 label-class 的类, 但其实通过这个类设置的 color 属性时不会生效的, 具体原因可以看下面的分析.

cnh2zyt3

cnh2zyt32#

问题分析:

我猜你代码截图中的问题其实应该是这样的🤔,你希望使用 style 或者 .van-radio__label--right 来进行样式覆盖,下面是关于这两种方式都不可行的原因:

关于直接在自定义组件上使用 style 来绑定样式的问题:

这部分问题其实微信小程序开发文档已经提到了,看这个--> 虚拟化组件节点
据我对 radio 组件源码的观察, 这个组件并没有提供接收和设置 style 值的方式

关于使用 .van-radio__label--right 来进行样式覆盖的问题:

默认情况下 .van-radio__label--right 这个类确实是作用在 label 上的,也确实可以通过这个类去设置一些属性, 但是问题在于你在代码中的 login.wxss 文件中定义了这个类, 那么这个类的值读取的时候就会先于组件内部的类 , 当这个类选择器与其它类选择器同时作用于一个元素并且属性产生冲突时, css 的规则是使用后读取到的类选择器的属性值. 虽然这个类排在其它类的后面,但是由于它最先被读取出来, 所以它就会被组件中的类覆盖.试试这个-- 多个类被应用的时候指向一个元素

关于存在样式隔离依旧可以实现组件内同名的类覆盖的问题请看这里: 组件样式隔离

VantComponent 最终是调用 Component 构造器来构造页面的.

大佬们, 如有不妥, 还请指正.

相关问题