全局样式类 全局样式类是微信小程序定义的一套用于修改组件内部样式的方案。如果希望组件外样式类能够影响组件内部,可以在组件构造器中的 options.addGlobalClass 字段设置为 true(Taro UI 的组件均开启了此特性)。这个特性从小程序基础库版本 2.2.3 开始支持。 P.S. addGlobalClass 这个 API 只对 Page 上的 class 起作用。换言之,如果在自定义的组件中使用 taro-ui,是无法在自定义组件内部通过 全局样式类 的方式去更改组件样式的。 当开放了全局样式类,存在外部样式无意间污染组件样式的风险。由于 Taro UI 的组件样式采用 BEM 的命名方式,从一定程度上避免了样式污染的问题。 /* page/index/index.js / import Taro from '@tarojs/taro' import { AtButton } from 'taro-ui' import "./index.scss" export default IndexPage extends Taro.Component { render () { return <AtButton className='my-button' /> } } /* page/index/index.scss 必须在 Page 上 .at-button 为组件内部类名,只需要写一样的类名去覆盖即可,但需要注意层级问题。(使用方式跟传统 CSS 一样) **/ .my-button.at-button { color: red; }