Как использовать кнопку переопределения с помощью компонента Box в Material-UI?

Question

Я пытался понять и написать код компонента Box в пользовательском интерфейсе материала. (https://material-ui.com/components/box/#box)

Я пытался переопределить компонент Button двумя способами, описанными в документации, но я понятия не имею, как. Когда я запускаю сегмент кода, используя оба метода, появляется кнопка, но цвет не меняется. Затем, когда я пытаюсь добавить дополнительную кнопку под сегментом кода элемента-клона, я получаю сообщение об ошибке: «Не удается прочитать свойство« имя-класса »из неопределенного».

            <Box color="primary" clone>
                <Button>Click</Button>
                <Button>Click</Button>
            </Box>

Когда я добавляю компонент Button под вторым способом рендеринга, первая кнопка просто полностью исчезает из DOM.

             <Box color="secondary">
                {props => <Button {...props} > Click </Button>}
                <Button color="secondary">Click</Button>
            </Box> 

Буду признателен за объяснение того, как работает переопределение базовых элементов DOM.

Answer 1

Существует несколько проблем с кодом, который вы указали в своем вопросе.

1. primary и secondary не являются допустимыми цветами в палитре. Они являются допустимыми параметрами для color опоры Button, но здесь вы пытаетесь ссылаться на цвета в объекте palette темы. Для этого вам понадобятся primary.main и secondary.main (это то, что Кнопка использует при указании <Button color="primary">).

2. Box поддерживает только один child при использовании свойства clone и поддерживает только один дочерний элемент при использовании подхода рендеринга реквизита. В обоих ваших примерах у вас двое детей.

---

Вот исходный код Material-UI , который имеет дело с опцией клонирования:

      if (clone) {
        return React.cloneElement(children, {
          className: clsx(children.props.className, className),
          ...spread,
        });
      }

Это создает новый дочерний элемент, который объединяет className, сгенерированный Box, с любым существующим именем класса в дочернем элементе. Он получает имя существующего класса через children.props.className, но при наличии нескольких дочерних элементов children будет массивом элементов и не будет иметь свойства props, поэтому вы получите ошибку:

Невозможно прочитать свойство 'className' из неопределенного

---

Вот исходный код Material-UI , который относится к подходу рендеринга реквизитов:

      if (typeof children === 'function') {
        return children({ className, ...spread });
      }

Если у вас более одного дочернего элемента, typeof children === 'function' не будет истинным и не будет использовать подход рендеринга реквизита. В этом случае оба потомка просто получают нормальный реагирующий рендеринг, а попытка рендеринга функции ничего не делает.

---

Ниже приведен рабочий пример, который устраняет все эти проблемы с помощью одного Button дочерний элемент в случае clone и единственный дочерний элемент функции в случае рендеринга реквизитов (функция, которая затем отображает два элемента Button).

import React from "react";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <>
      <Box color="primary.main" clone>
        <Button>Click</Button>
      </Box>
      <Box color="secondary.main">
        {props => (
          <>
            <Button {...props}> Click </Button>
            <Button color="secondary">Click</Button>
          </>
        )}
      </Box>
    </>
  );
}