Стилизация компонента пользовательского интерфейса React Material с помощью функции .map

Итак, у меня есть массив компонентов пользовательского интерфейса материала (в моей сокращенной версии я использую два простых компонента Button).

Как добавить стиль к этим компонентам по мере их перебора в функции карты?

Например, как мне настроить размер значка, чтобы он составлял, скажем, 64 x 64 пикселя?

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

reactjs javascript material-ui css jss
person Simon Long    schedule 11.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам необходимо выполнить итерацию по массиву функций, которые принимают 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>
  );
}
person goto1    schedule 11.05.2020
comment
Этот подход отлично работает в CodeSandbox. Однако я получаю ошибку типа при запуске в моем режиме разработки. (Примечание: я использую Flow для проверки типов) - я получаю следующую ошибку: TypeError: createButton не является функцией. Есть идеи, почему? - person Simon Long; 11.05.2020
comment
@SimonLong, вы уверены, что в CodeSandbox есть то же самое, что и в вашей локальной среде? Что показывает console.log(typeof createButton)? Проверка типов не должна ни на что влиять. - person goto1; 11.05.2020
comment
Однозначно тот же код. Даже вставив ваш в. Console.log (typeof createButton) дает Object - person Simon Long; 11.05.2020
comment
@SimonLong, это не имеет смысла, не могли бы вы показать скриншот кода, который вы пытаетесь использовать и который дает вам TypeError? - person goto1; 11.05.2020
comment
Вот оно: drive.google.com/file/d/1sBhvf4JZJ9.com/file/d/1sBhvf4ZJ9 - person Simon Long; 11.05.2020
comment
@SimonLong, можете ли вы загрузить его на что-нибудь вроде imgur.com и поделиться ссылкой? - person goto1; 11.05.2020
comment
@SimonLong, не могли бы вы также показать массив leftButtons? Похоже, currButton - это объект типа Button, а не функция. - person goto1; 11.05.2020
comment
Мои искренние извинения. Я только что заметил в вашем примере, что кнопки - это набор функций. Извините. #mortified - person Simon Long; 11.05.2020
comment
@SimonLong рад, что вы смогли выяснить - person goto1; 11.05.2020