如何使用 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) => {&nbsp; const classes = lightMode ? useLightCardStyles(): useDarkCardStyles();&nbsp; icon.style.color = "red";&nbsp; return(/*....*/)}尝试console.log(icon.style)