taro-ui样式设置无效



  • ee4e1e7d-a8ef-4fd1-9922-69714802e7d7-image.png
    3108eab9-f566-40ea-b937-96020e1a34c3-image.png



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



  • 没懂,能说再说清楚一点吗?



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

登录后回复