如何在 React with Material-UI 中为未知孩子添加样式？答案

【问题标题】：How to add styles to an unknown child in React with Material-UI?如何在 React with Material-UI 中为未知孩子添加样式？
【发布时间】：2020-07-15 13:52:00
【问题描述】：

下面的函数将在循环中运行。我想将样式添加到我想作为参数传递给函数的icon。

icon 是一个未知的 React Material-UI 图标组件。

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

循环代码可能是错误的我只是在这里写它作为一个例子来说明我想如何执行它。有没有更好的办法？任何帮助都会很棒。

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案1】：

一些注意点：

添加{} like ({ light, heading, num, icon }) 以列出道具
props lightMode不匹配列表属性light，需要更改其中一个
使用 Material-UI nesting selector & 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>
  );
}

【讨论】：

谢谢@keikai。您的解决方案暂时有效。然后 React 编译失败并抛出错误。该应用程序仅呈现一秒钟，然后崩溃到错误。 Line 40: React Hook "useLightCardStyles" is called in function "renderStyledCard" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks。在您的沙盒演示中，它显示为警告。我正在使用 React v16.9.0。
@AyushNair 我只是分叉了你的代码，现在它已经修复了。还有其他问题，但我想这与您在本文中描述的问题无关。
@keikai 这仍然有条件钩子用法（有条件地使用 useLightCardStyles()）。这是一个修复它的示例：codesandbox.io/s/jovial-bassi-oolrk
@RyanCogswell 非常感谢。你们俩。它现在可以正常工作，没有任何警告或错误。干杯！

【解决方案2】：

我认为这应该可行：

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

试试console.log(icon.style)

【讨论】：