Change style of children in MaterialUI only in one element

Question

I am using <ListItemIcon/> from Material-UI. In one component I use two different Icons and I want them to be different sizes and other styles in general. <ListItemIcon/> is build with svg which has class name MuiSvgIcon-root - this is where I should change the fontSize of Icon. I dont know how to do it. When I do

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

It changes setting for every Icon size in my project.

My component

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

By specifying name: 'MuiSvgIcon' in your makeStyles call, you are causing Material-UI to override the global MuiSvgIcon-root class. If you use the name option in makeStyles, you should never give it a Mui name since these are treated differently and intended for use within the library code.

Below is one way to customize the icon size:

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

This can then be used as in the following example:

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

Answer 2

There are many ways to do styling with material-ui, I won't say this is the best way, but personally it is my own favorite way

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


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

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