使用 .map 函数为 React Material UI 组件设置样式

Question

所以我有一组 Material UI 组件（对于我的精简版，我使用了两个简单的 Button 组件）。

当我在地图函数中迭代这些组件时，如何为这些组件添加样式？

例如，如何将图标的大小调整为 64px x 64px ？

import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import SaveIcon from "@material-ui/icons/Save";
import DeleteIcon from "@material-ui/icons/Delete";
export default function App() {
  const buttons = [
    <Button
      variant="contained"
      color="primary"
      size="large"
      startIcon={<SaveIcon />}
    >
      Save
    </Button>,
    <Button
      variant="contained"
      color="secondary"
      size="large"
      startIcon={<DeleteIcon />}
    >
      Delete
    </Button>
  ];

  return (
    <div className="App">
      {buttons.map(currButton => {
        //How do I add style to each of these components as I iterate through them ?
        return currButton;
      })}
    </div>
  );
}

Answer 1

您需要遍历以props 作为参数的函数数组，并返回Button 组件以及您传递的任何额外props。

export default function App() {
  const buttons = [
    props => (
      <Button
        variant="contained"
        color="primary"
        size="large"
        startIcon={<SaveIcon />}
        {...props}
      >
        Save
      </Button>
    ),
    props => (
      <Button
        variant="contained"
        color="secondary"
        size="large"
        startIcon={<DeleteIcon />}
        {...props}
      >
        Delete
      </Button>
    )
  ];

  return (
    <div className="App">
      {buttons.map(createButton => {
        const CustomButton = createButton({
          style: { backgroundColor: "red" }
        });
        return CustomButton;
      })}
    </div>
  );
}