ui：如何更改列表中的fontSize？

Question

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

如何更改fontSize？

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

Answer 1

对于 mui v5，使用primaryTypographyPropsprop 传递所需的样式

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

Answer 2

正如ListItemText 的文档所述，您可以primary使用classesprops和primarykey 覆盖文本样式。

建立风格

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

将样式套用至 ListItemText

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

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

Answer 3

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>