taro-ui样式设置无效

jd_56b49abcf0853

liarh

我记得Taro-UI中，对Taro-UI组件的样式覆盖不是直接追加class,而是，在组件使用的Page 上对应的 css 文件中，找到这个组件在页面展示时所对应的 css 的类名，然后，重写该类名覆盖生效的。

jd_4736120082e52

没懂，能说再说清楚一点吗？

mingshan8

全局样式类
全局样式类是微信小程序定义的一套用于修改组件内部样式的方案。如果希望组件外样式类能够影响组件内部，可以在组件构造器中的 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;
}