在 react-router 中活动时 MUI 更改 ListItemText 样式

Question

我目前正在使用来自 MUI 的 ListItem。我试图在它处于活动状态时使其更大胆，但似乎 font-weight 不起作用。

代码见下文。

<List
      component='nav'
      aria-label='main mailbox folders'
    >
      <ListItem
        button
        component={NavLink}
        exact
        to='/accounts'
        activeClassName={classes.active}
        className={classes.appBarNavButtons}
      >
        <MyAccountsIcon />
        <ListItemText
          style={{ marginLeft: '20px', fontSize: 'large' }}
          primary='My Accounts'
        />
      </ListItem>
</List>

风格：

appBarNavButtons: {
  color: colors.blueGrey[800],
  textTransform: 'none',
  letterSpacing: 0,
},
active: {
  color: '#0056b3',
  fontWeight: 'bolder',
  '& $icon': {
    color: theme.palette.primary.main,
  }
}

任何帮助或建议将不胜感激。

Answer 1

V5

在 v5 中，ListItem 和 makeStyles 的 button 属性已弃用。替代方案是 ListItemButton 和 styled，如下例所示：

import MuiListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import { styled } from '@mui/material/styles';

const ListItemButton = styled(MuiListItemButton)({
  '&.active .MuiTypography-root': {
    fontWeight: 'bold',
  },
});

<ListItem disablePadding>
  <ListItemButton component={NavLink} exact to="/">
    <ListItemText primary="Home" />
  </ListItemButton>
</ListItem>

V4

您的样式的优先级低于ListItem 中来自Typography 的样式，您可以使用嵌套选择器覆盖它以增加CSS 特异性：

const useStyles = makeStyles({
  active: {
    '& .MuiTypography-root': {
      fontWeight: 'bold',
    },
  },
});

<ListItem
  button
  component={NavLink}
  exact
  to="/"
  activeClassName={classes.active}
>
  <ListItemText primary="Home" />
</ListItem>