Как сочетать style-system с React Material?

Question

Я хочу использовать стилизованную систему в своем проекте, который является админ-панелью. Я построил проект на основе React Material, и у меня есть много разных форм с вводом, выбором, флажками и т. Д. Во многих местах мне нужно установить некоторые поля / отступы для элементов, и я делаю этот момент с помощью некоторого настраиваемого компонента Box, который использует функции стилизованной системы (пространство, цвет и т. Д.). Но в итоге у меня получилась довольно громоздкая структура, примерно такая:

Но потом я понимаю, что в react-material много компонентов, и что мне делать? Переопределить их все, чтобы иметь какой-то похожий стиль? Или какой способ может быть удобнее?

Answer 1

Так что то, что вы просите, определенно может быть достигнуто без добавления такого большого количества шума в разметку.

Во-первых, styledразметка работает для всех компонентов пользовательского интерфейса материала . К счастью, ТАКЖЕ совместим с styled-components. Так ты можешь это сделать

      const StyledButton = styled(TextField)`
  color: red;
  // to access theme in a styled-system way
  ${get("mt", 3)};
`;

Этот аксессуар называется getнемного уникален, он исходит из этого пакета . Это позволяет использовать все styled-system ароматизированные ключи внутри styled-component.

Если вам нужны встроенные реквизиты для всех материальных компонентов, как вы описали, это немного сложнее. Вам нужно будет обернуть каждый компонент подходящими декораторами, которые включают такие встроенные свойства. Создание в основном теневой библиотеки.

      import styled from 'styled-components';
import { variant, space, layout, position } from 'styled-system';

export default styled(TextField)(
  position,
  layout,
  space,
  // whatever else
);

Ознакомьтесь с официальным руководством по сборке, чтобы лучше понять.