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

Question

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

如何向这些组件添加样式当我在 map 函数中遍历它们时？

例如，我如何将图标的大小调整为 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 作为参数和 return 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>
  );
}

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

Styling a React Material UI Component with a .map function

javascript

css

reactjs

material-ui

jss