Question

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

如何更改fontSize？

下面是一些示例代码，它们是我从Sandbox上的Material UI documentation获得的。

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

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

创建样式

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

将样式应用于ListItemText

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

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

CodeSandBox Demo

Answer 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>

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

2 个答案: