taro中自定义tabbar组件样式不受全局样式app.scss影响？？？

[Vinsurs]

相关平台

微信小程序

小程序基础库: 2.21.0
使用框架: React

复现步骤

按照微信官方文档自定义tabbar方式在taro中自定义tabbar，在全局样式app.scss中定义部分tabbar组件应用的样式

期望结果

自定义tabbar受app.scss样式影响

实际结果

app.scss样式对自定义tabbar没效果

环境信息

Taro v3.3.19


  Taro CLI 3.3.19 environment info:
    System:
      OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
      Shell: 5.1.4 - /bin/bash
    Binaries:
      Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
      npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    npmPackages:
      @tarojs/components: 3.3.19 => 3.3.19 
      @tarojs/mini-runner: 3.3.19 => 3.3.19 
      @tarojs/react: 3.3.19 => 3.3.19 
      @tarojs/runtime: 3.3.19 => 3.3.19 
      @tarojs/taro: 3.3.19 => 3.3.19 
      @tarojs/webpack-runner: 3.3.19 => 3.3.19 
      babel-preset-taro: 3.3.19 => 3.3.19 
      eslint-config-taro: 3.3.19 => 3.3.19 
      react: ^17.0.0 => 17.0.2 
      taro-ui: ^3.0.0-alpha.10 => 3.0.0-alpha.10

---

补充信息

这样自定义的tabbar是小程序的自定义组件？？应该不是吧，taro3是基于template对吧？那为什么全局样式没起作用呢？把全局样式app.scss中那部分样式放到tabbar.tsx的样式文件中就可以了。请问是怎么回事？

[Chen-jj]

@Vinsurs 自定义 TabBar 比较特殊，要编译为自定义组件给小程序调用。因此会有样式隔离。

配置一下 addGlobalClass 即可：

class CustomTabBar extends Component {
  static options = {
    addGlobalClass: true
  }
}