更改图标的大小

Question

我有这个项目，我想做一个侧边栏，侧边栏里面有图标和一个表达这个图标的词，问题是当我想在“useStyles()”中改变图标的​​大小时它没有改变它的大小，我不知道为什么。

我该如何解决这个问题？

const useStyles = makeStyles((theme) => ({
  item: {
    display: "flex",
    alignItems: "center",
    marginBottom: theme.spacing(4),
    [theme.breakpoints.up("sm")]: {
      marginBottom: theme.spacing(3),
      cursor: "pointer",
    },
  },
  icon: {
      marginRight: theme.spacing(1),
      [theme.breakpoints.up("sm")]:{
          fontSize: "18px"
      }
  },
  text: {
      fontWeight: 500,
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  },
  container: {
    height: "100vh",
    paddingTop: theme.spacing(2),
    color: "white",
    backgroundColor: theme.palette.primary.main,
    [theme.breakpoints.up("sm")]:{
        backgroundColor: 'white',
        color: '#555',
        border: '1px solid #ece7e7'
    }
},
}));

const LeftBar = () => {
  const classes = useStyles();
  return (
    <Container className={classes.container}>
      <div className={classes.item}>
        <Home className={classes.icon} />
        <Typography className={classes.text}>HomePage</Typography>
      </div>
      <div className={classes.item}>
        <Home className={classes.icon} />
        <Typography className={classes.text}>HomePage</Typography>
      </div>
      <div className={classes.item}>
        <Home className={classes.icon} />
        <Typography className={classes.text}>HomePage</Typography>
      </div>
      <div className={classes.item}>
        <Home className={classes.icon} />
        <Typography className={classes.text}>HomePage</Typography>
      </div>
    </Container>
  );
};

export default LeftBar;

Answer 1

如果您想快速修复，请将 sx 属性指定给您的图标，然后将所需的字体大小放在那里。

<Home sx={{fontSize:"18px"}}/>

否则请确保您的导入语句是正确的。

... from "@mui/material/styles"

通常我将 mui 样式用于断点，所以类似于

 const IconWrapper = styled("div")(({ theme }) => ({
  marginRight: theme.spacing(1),
  [theme.breakpoints.up("sm")]: {
    fontSize: 18,
  },
}));

然后像这样实现它

<IconWrapper>
   <Home />
</IconWrapper>