材料 ui：如何更改列表中的字体大小？答案

【问题标题】：material ui: how to change fontSize in Lists?材料 ui：如何更改列表中的字体大小？
【发布时间】：2019-01-18 23:29:39
【问题描述】：

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

如何更改字体大小？

这是一些示例代码，我从Material UI documentation 上的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>
  );
}

【问题讨论】：

标签： javascript reactjs list material-ui

【解决方案1】：

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

创建样式

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

将样式应用于ListItemText

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

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

【讨论】：

【解决方案2】：

const useStyles = makeStyles({
  item: {
    color: theme.palette.secondary.main,
    '& span, & svg': {
      fontSize: '3rem'
    }
  }
});

const classes = useStyles();

<MUIListItem>
  <MUIListItemIcon className={classes.item}>some_icon</MUIListItemIcon>
  <MUIListItemText className={classes.item} primary="some text" />
</MUIListItem>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

使用className其实很容易做到，

<ListItemText className="artist" primary={props.song.artist} />

css

.artist {
    transform: scale(.8) // scale down
    -webkit-transform-origin-x: 0; // align text left after scaling
}

享受吧！

【讨论】：

【解决方案5】：

我注意到 LinkItemText 在底层使用 Typography 覆盖了您设置的字体大小。您可以使用 disableTypography 属性删除排版。

<ListItemText sx={{ fontSize: "..." }} disableTypography >{text}</ListItemText>

【讨论】：