Question

我正在使用Material-UI中的<ListItemIcon/>。在一个组件中，我使用两个不同的图标，并且希望它们的大小和其他样式通常相同。 <ListItemIcon/>使用具有类名MuiSvgIcon-root的svg构建-这是我应该更改Icon的fontSize的地方。我不知道该怎么做。

const useStyles = makeStyles({
  root:{
    fontSize: "2rem"
  }
},{name: 'MuiSvgIcon'});

它会更改项目中每种Icon大小的设置。

我的组件

function Section(props) {
  const classes = useStyles();
  const { title, listInfo, icon, gridSize } = props;

  return (
    <List>
      <ListItem>
        <ListItemIcon >{icon}</ListItemIcon> //here icon bigger
        <ListItemText primary={title} />
      </ListItem>
      <Divider variant="middle" />
      <Grid container>
        {listInfo.map((item, index) => {
          return (
            <Grid item xs={gridSize}>
              <ListItem key={index}>
                <ListItemIcon>
                  <Brightness1Icon /> //here icon smaller
                </ListItemIcon>
                <ListItemText
                  primary={item.primaryText}
                  secondary={item.secondaryText}
                />
              </ListItem>
            </Grid>
          );
        })}
      </Grid>
    </List>
  );
}

Answer 1

使用material-ui进行样式设计的方法有很多，我不会说这是最好的方法，但就我个人而言，这是我自己喜欢的方法

import { styled } from "@material-ui";


const Section = () => {
  return (
    ...
      <SmallerListItemIcon>
        <Brightness1Icon />
      </SmallerListItemIcon>
    ... 
  )
}

const SmallerListItemIcon = styled(ListItemIcon)({
  fontSize: "<your size here>"
});

Answer 2

通过在name: 'MuiSvgIcon'调用中指定makeStyles，将导致Material-UI覆盖全局MuiSvgIcon-root类。如果您在name中使用makeStyles选项，则永远不要给它起these are treated differently的名字，Mui应该在库代码中使用。

以下是自定义图标大小的一种方法：

const BiggerListItemIcon = withStyles({
  root: {
    "& .MuiSvgIcon-root": { fontSize: "2em" }
  }
})(ListItemIcon);

然后可以在以下示例中使用它：

import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}));
const BiggerListItemIcon = withStyles({
  root: {
    "& .MuiSvgIcon-root": { fontSize: "2em" }
  }
})(ListItemIcon);

export default function SimpleList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </ListItem>
        <ListItem button>
          <BiggerListItemIcon>
            <DraftsIcon />
          </BiggerListItemIcon>
          <ListItemText primary="Drafts" />
        </ListItem>
      </List>
    </div>
  );
}

仅在一个元素中更改MaterialUI中子元素的样式

2 个答案: