Стилизованные компоненты — это популярная библиотека CSS-in-JS, которая позволяет разработчикам писать код CSS с использованием JavaScript более интуитивно понятным и основанным на компонентах способом. При использовании стилевых компонентов с Material-UI (MUI5) важно понимать, как передавать реквизиты для настройки стиля ваших компонентов. В этом подробном руководстве мы рассмотрим несколько методов передачи реквизитов в стилизованные компоненты в MUI5, а также приведем примеры кода.

Метод 1: встроенные реквизиты
Самый простой способ передать реквизиты стилизованному компоненту в MUI5 — использовать встроенные реквизиты. Вы можете напрямую получить доступ к объекту реквизита в литерале шаблона стилизованного компонента и применить условный стиль на основе значений реквизита. Вот пример:

import { styled } from '@mui/system';
const StyledButton = styled('button')`
  background-color: ${(props) => (props.primary ? 'blue' : 'red')};
  color: white;
  padding: 10px;
`;
function App() {
  return (
    <div>
      <StyledButton primary>Primary Button</StyledButton>
      <StyledButton>Secondary Button</StyledButton>
    </div>
  );
}

Метод 2. Расширение стилей
Другой способ передать реквизиты стилизованным компонентам в MUI5 — расширить стили. Вы можете определить компонент с базовым стилем и расширить его дополнительными стилями на основе реквизитов. Вот пример:

import { styled } from '@mui/system';
const BaseButton = styled('button')`
  color: white;
  padding: 10px;
`;
const PrimaryButton = styled(BaseButton)`
  background-color: blue;
`;
const SecondaryButton = styled(BaseButton)`
  background-color: red;
`;
function App() {
  return (
    <div>
      <PrimaryButton>Primary Button</PrimaryButton>
      <SecondaryButton>Secondary Button</SecondaryButton>
    </div>
  );
}

Метод 3: создание компонента-оболочки
Если вам нужна более сложная логика или несколько реквизитов, вы можете создать компонент-оболочку, который принимает реквизиты и применяет их к стилизованному компоненту. Такой подход обеспечивает большую гибкость и возможность повторного использования. Вот пример:

import { styled } from '@mui/system';
const StyledButton = styled('button')`
  background-color: ${(props) => props.backgroundColor};
  color: ${(props) => props.textColor};
  padding: 10px;
`;
function ButtonWrapper({ primary, children }) {
  const backgroundColor = primary ? 'blue' : 'red';
  const textColor = 'white';
  return (
    <StyledButton backgroundColor={backgroundColor} textColor={textColor}>
      {children}
    </StyledButton>
  );
}
function App() {
  return (
    <div>
      <ButtonWrapper primary>Primary Button</ButtonWrapper>
      <ButtonWrapper>Secondary Button</ButtonWrapper>
    </div>
  );
}

Передача реквизитов стилизованным компонентам в MUI5 предоставляет мощный способ настройки стиля ваших компонентов. В этой статье мы рассмотрели три различных метода: использование встроенных свойств, расширение стилей и создание компонента-обертки. В зависимости от вашего конкретного случая использования вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Поэкспериментируйте с этими методами, чтобы создать визуально привлекательные и динамичные пользовательские интерфейсы в своих приложениях MUI5.