材料用户界面：如何更改列表中的字体大小？

Question

我正在使用 React js 和 Material UI 创建一些表单。我想把一些列表上的字体变小，以获得更紧凑的展示，但无论我在哪个级别添加代码 fontSize={10} 似乎都没有效果。

如何更改字体大小？

下面是一些示例代码，我从 Material UI 文档的 Sandbox 中获得了这些代码。

 const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
});

function FolderList(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <List>
        <ListItem>
          <ListItemText primary="Photos" secondary="Jan 9, 2014" />
        </ListItem>
        <ListItem>
          <ListItemText primary="Work" secondary="Jan 7, 2014" />
        </ListItem>
      </List>
    </div>
  );
}

原文由 levraininjaneer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 ListItemText 的 文档 所说，您可以使用 classes 道具和 primary 键覆盖 primary --- 文本样式。

创建样式

 const styles = theme => ({
  listItemText:{
    fontSize:'0.7em',//Insert your required size
  }
});

将样式应用于 ListItemText

 <ListItemText
            classes={{primary:classes.listItemText}}
          primary="Inbox" />

如果要覆盖辅助字体大小，请将样式应用于辅助键。

原文由 noName94 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 mui v5，使用 primaryTypographyProps 属性传递所需的样式

<ListItemText
    primaryTypographyProps={{fontSize: '18px'}}
    primary="List Text"
/>

原文由 ritz 发布，翻译遵循 CC BY-SA 4.0 许可协议