如何客制化一套小程序组件的主题?
在项目中一直都是使用的小程序原生的组件,并且在 app.wxss 里大概覆写了组件样式。 但是一直都有一些小问题,只能加权重的形式去覆盖它,不能直接覆写原有的样式类,因为原有的样式类都是在 user agent stylesheet 当中,而且可能默认样式使用了伪类/属性选择器。例如:按钮的宽度使用了 button:not([size='mini']) ,来设置默认的最大宽度,如果只是设置了 button 的 width 和 max-width 并不会生效,所以在代码中需要例如 view button:not([size='mini']) 来加权覆盖。 并且按钮的点击的样式更 重 且不易发现 .button-hover[type='primary'] ,如果我不想每个按钮组件上都修改 hover-class 那么我就要在给覆写的样式增加 !important ,而这个是不应该的,亦或是给父级组件增加 className 在 app.wxss 当中为覆写样式加权重。但是,这只能给 页面组件 应用覆盖,如果想要给 自定义组件 也应用上的话,就需要给自定义组件开启 options.addGlobalClass: true,而这也需要给每一个组件开启,我认为也是不建议的,这会导致其它问题。 而我只是单纯的想修改原生组件的主题色,比如说把现在的绿色,变更为蓝色/紫色。那我就需要把每一个组件所有样式都修改成我所期望的颜色,包括检查可能的每一项伪类选择器。 是否有一个提供修改原生组件主题样式变量的入口、专门的一个文件?或者不把组件默认样式书写在 user agent stylesheet 当中。 因为 user agent stylesheet 的权重太高了。 [图片]