Material UI如何设置sidebar侧边栏内菜单项的大字号

问题原因 #

你当前的配置不生效有两个核心原因：

1. Material UI的ListItemText组件内部封装了独立的Typography组件，自带默认字体样式，优先级高于父元素ListItem继承的样式，你把字号类加在ListItem上无法作用到内部的文本节点
2. 第二个菜单组ItemsSecond的ListItem完全没有绑定你写的fontSize类，就算父级样式能生效这部分也不会生效

解决方法 #

以下三种方案任选其一即可：

方案1：直接通过组件属性配置（最简便，无需修改样式定义）

给所有ListItemText增加primaryTypographyProps属性，直接指定内部文本字号，修改后的代码片段如下：

// 第一个菜单组
{SidebarItems.ItemsList.map((text, index) => (
  <ListItem button key={text.title}>
    <ListItemText
      primary={text.title}
      primaryTypographyProps={{ fontSize: 24 }}
    />
  </ListItem>
))}

// 第二个菜单组同步修改
{SidebarItems.ItemsSecond.map((text, index) => (
  <ListItem button key={text.title}>
    <ListItemIcon>{index % 2 === 0 ? <InboxIcon/> : <MailIcon/>} 
    </ListItemIcon>
    <ListItemText 
      primary={text.title}
      primaryTypographyProps={{ fontSize: 24 }}
    />
  </ListItem>
))}

方案2：样式类绑定到文本组件

修改样式定义，把字号类绑定到ListItemText而非父级ListItem：

1. 保留你现有的fontSize样式类，或者重命名更语义化
2. 给所有ListItemText绑定该类：

<ListItemText 
  primary={text.title}
  className={classes.fontSize}
/>

方案3：全局统一侧边栏文本样式（适合全侧边栏文本统一字号的场景）

直接修改drawerPaper样式，批量覆盖侧边栏内所有Typography的字号，不需要修改列表渲染逻辑：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    // 其余原有样式保持不变
    drawerPaper: {
      width: drawerWidth,
      '& .MuiTypography-root': {
        fontSize: 24
      }
    },
  })
)

内容的提问来源于stack exchange，提问作者user14510391