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

【问题标题】：Change style of children in MaterialUI only in one element仅在一个元素中更改 MaterialUI 中子项的样式
【发布时间】：2020-02-03 15:34:57
【问题描述】：

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

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

它会更改我项目中每个图标大小的设置。

我的组件

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

通过在 makeStyles 调用中指定 name: 'MuiSvgIcon'，您将导致 Material-UI 覆盖全局 MuiSvgIcon-root 类。如果您在makeStyles 中使用name 选项，则永远不要给它一个Mui 名称，因为these are treated differently 并打算在库代码中使用。

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

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

【讨论】：

【解决方案2】：

使用material-ui做造型的方式有很多，我不会说这是最好的方式，但我个人是最喜欢的方式

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


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

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

【讨论】：