MUI：BottomNavigationAction 覆盖标签样式答案

【问题标题】：MUI: BottomNavigationAction override label stylesMUI：BottomNavigationAction 覆盖标签样式
【发布时间】：2019-03-04 16:33:10
【问题描述】：

我正在为移动设备实现BottomNavigation 栏。我希望标签文本为大写，并将 5px 添加到上方图标的间距。

<BottomNavigation 
  value={selectedTab} 
  onChange={this.handleTabChange} 
  className={classes.bottomNav}>
  <BottomNavigationAction 
    label="Details" 
    value={0} 
    icon={<DescriptionIcon />} 
    className={classes.bottomNavLabel} 
  />
  <BottomNavigationAction
    label="Card"
    value={1}
    icon={<CreditCardIcon />}
    disabled={!navEnabled}
    className={classes.bottomNavLabel}
  />
</BottomNavigation>

我的样式如下所示：

export default ({ spacing, breakpoints }: Theme) =>
  createStyles({
    bottomNav: {
      position: 'fixed',
      bottom: 0,
      width: '100%',
    },
    bottomNavLabel: {
      textTransform: 'uppercase',
      marginTop: 5,
    },
  })

我尝试在 bottomNavLabel 类中设置样式，但它击中了整个按钮元素。我只想点击里面有标签的<span>元素。

根据docs i can override classes.label，但我无法让它工作。我怀疑这意味着我在 BottomNavigationAction 周围创建了一个包装器组件，但我不想这样做，因为我没有在其他地方使用它，而且感觉有点“臃肿”。

我该怎么做？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我想通了。 <BottomNavigationAction> 需要一个道具 classes 我在其中定义 label 样式。像这样：

<BottomNavigation 
  value={selectedTab} 
  onChange={this.handleTabChange} 
  className={classes.bottomNav}>
  <BottomNavigationAction 
    label={<span className="bottomNavLabel">Details</span>} 
    value={0} 
    icon={<DescriptionIcon />}
    classes={{label: classes.label}}
  />
  <BottomNavigationAction
    label={<span className="bottomNavLabel">Card</span>} 
    value={1}
    icon={<CreditCardIcon />}
    disabled={!navEnabled}
    classes={{label: classes.label}}
  />
</BottomNavigation>

和样式：

export default ({ spacing, breakpoints }: Theme) =>
  createStyles({
    bottomNav: {
      position: 'fixed',
      bottom: 0,
      width: '100%',
    },
    label: {
      textTransform: 'uppercase',
      marginTop: 5,
    },
  })

【讨论】：