material ui：如何更改列表中的字體大小？

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>
  );
}

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" />

如果要覆蓋輔助字體大小，則將樣式應用到輔助鍵。

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>

Answer 3

使用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
}

請享用！

Answer 4

我注意到LinkItemText在引擎蓋下使用了Typography ，它覆蓋了您設置的字體大小。 您可以使用disableTypography道具刪除排版。

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

Answer 5

對於 mui v5，使用primaryTypographyProps道具傳遞所需的樣式

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