How to add styles to an unknown child in React with Material-UI?

Question

The below function is going to be run on a loop. I want to add styles to the icon which I want to pass as an argument to the function.

The icon is a going to be an unknown React Material-UI Icon component.

const renderStyledCard = (lightMode, heading, num, icon) => {
  const classes = lightMode ? useLightCardStyles(): useDarkCardStyles();
  return (
    <Card className={classes.root}>
      <CardContent>
        <Typography variant="h4" component="h4" className={classes.textColor}>
          {heading}
        </Typography>
        <div className={classes.content}>
          <Typography variant="h4" component="h4" className={classes.textColor}>
            {num}
          </Typography>
          {icon}
          // Ex. <VpnKey className={[classes.icon, classes.textColor]} />
          // Ex. <AccountCircle className={[classes.icon, classes.textColor]} />
          {icon}
        </div>
      </CardContent>
    </Card>
  );
};

Loop execution is going to be like -

return [
        {light: true, 
         heading: 'Accounts', 
         num: 100, 
         icon: <AccountCircle />
        },
        ...theRest
       ].map(ele => renderStyledCard(...ele))

The loop code could be wrong I just wrote it here as an example to show how I wanted to execute it. Is there a better way? Any help would be awesome.

Answer 1

Some notice points:

• add {} like ({ light, heading, num, icon }) to list the props
• props lightMode not match list attribute light , need to change one of them
• use Material-UI nesting selector & svg to customize the icon style from its parent div

---

Full code sample:

import React from "react";
import "./styles.css";
import GetApp from "@material-ui/icons/GetApp";
import AccountCircle from "@material-ui/icons/AccountCircle";
import { Card, CardContent, Typography, makeStyles } from "@material-ui/core";
const useLightCardStyles = makeStyles(theme => ({
  root: {},
  content: {
    "& svg": {
      color: "red"
    }
  }
}));
const useDarkCardStyles = makeStyles(theme => ({}));

const data = [
  { light: true, heading: "Accounts", num: 100, icon: <AccountCircle /> },
  { light: true, heading: "Accounts", num: 100, icon: <GetApp /> }
];

const StyledCard = ({ light, heading, num, icon }) => {
  const lightCardClasses = useLightCardStyles();
  const darkCardClasses = useDarkCardStyles();
  const classes = light ? lightCardClasses : darkCardClasses;
  return (
    <Card className={classes.root}>
      <CardContent>
        <Typography variant="h4" component="h4" className={classes.textColor}>
          {heading}
        </Typography>
        <div className={classes.content}>
          <Typography variant="h4" component="h4" className={classes.textColor}>
            {num}
          </Typography>
          {icon}
        </div>
      </CardContent>
    </Card>
  );
};

export default function App() {
  return (
    <div className="App">
      {data.map(props => (
        <StyledCard {...props} />
      ))}
    </div>
  );
}

Answer 2

I think this should work:

const renderStyledCard = (lightMode, heading, num, icon) => {
  const classes = lightMode ? useLightCardStyles(): useDarkCardStyles();
  icon.style.color = "red";
  return(/*....*/)
}

Try console.log(icon.style)