Question

我正在为手机实现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周围创建了包装器组件，但我不希望这样做，因为我没有在其他地方使用它，并且感觉有点“ blo肿”。

我该怎么做？

Answer 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,
    },
  })

MUI：BottomNavigationAction覆盖标签样式

1 个答案: