如何使用 Material-UI 在 React 中向未知子元素添加样式？

Question

下面的函数将在循环中运行。我想添加样式，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>  );};循环执行将类似于 -return [        {light: true,          heading: 'Accounts',          num: 100,          icon: <AccountCircle />        },        ...theRest       ].map(ele => renderStyledCard(...ele))循环代码可能是错误的，我只是将其写在这里作为示例来展示我想要如何执行它。有没有更好的办法？任何帮助都是极好的。

Answer 1

一些注意点：

• 添加{}喜欢({ light, heading, num, icon })列出道具

• propslightMode与列表属性不匹配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)