Как добавить стили к неизвестному дочернему элементу в React с Material-UI?

Question

Следующая функция будет запущена для всех oop. Я хочу добавить стили к icon, которые я хочу передать в качестве аргумента функции.

icon - это неизвестный компонент React Material-UI Icon.

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

L oop выполнение будет похоже на -

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

Код l oop может быть неправильным, я просто написал его здесь в качестве примера, чтобы показать, как я хотел его выполнить. Есть ли способ лучше? Любая помощь будет потрясающей.

Answer 1

Некоторые замечания:

• добавить {} например ({ light, heading, num, icon }), чтобы вывести список реквизитов
• реквизиты lightMode не соответствует атрибуту списка light, необходимо изменить один из них
• используйте Material-UI селектор вложенности & svg, чтобы настроить стиль значка из его родительского div

---

Пример полного кода:

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

Я думаю, что это должно работать:

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

Попробуйте console.log(icon.style)