MUI Styled — это мощная библиотека, сочетающая в себе Material-UI и styled-компоненты, позволяющая разработчикам стилизовать свои компоненты React в стиле CSS-in-JS. В этой статье мы рассмотрим различные методы использования MUI в стиле TypeScript, попутно предоставляя примеры кода. Если вы новичок в MUI Styled или хотите расширить свои знания, это руководство поможет вам.

Методы использования MUI в стиле TypeScript:

1. Встроенные стили:
   MUI Styled позволяет определять стили непосредственно внутри вашего компонента с помощью функции styled. Вот пример:

import { styled } from '@mui/system';
const StyledButton = styled('button')({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
});
function MyComponent() {
  return <StyledButton>Click me</StyledButton>;
}

1. Расширение существующих компонентов.
   Вы можете расширять и настраивать стили существующих компонентов Material-UI с помощью MUI Styled. Вот пример:

import { styled } from '@mui/system';
import { Button } from '@mui/material';
const CustomButton = styled(Button)({
  backgroundColor: 'green',
  color: 'white',
});
function MyComponent() {
  return <CustomButton>Click me</CustomButton>;
}

1. Темы:
   MUI Styled позволяет использовать мощные возможности создания тем Material-UI. Вы можете определять и использовать собственные темы в своих стилизованных компонентах. Вот пример:

import { styled, ThemeProvider, createTheme } from '@mui/system';
import { Button } from '@mui/material';
const theme = createTheme({
  palette: {
    primary: {
      main: '#ff0000',
    },
  },
});
const CustomButton = styled(Button)({
  backgroundColor: (props) => props.theme.palette.primary.main,
  color: 'white',
});
function MyComponent() {
  return (
    <ThemeProvider theme={theme}>
      <CustomButton>Click me</CustomButton>
    </ThemeProvider>
  );
}

1. Стилизация на основе реквизитов.
   Вы можете условно применять стили на основе реквизитов компонента с помощью MUI Styled. Вот пример:

import { styled } from '@mui/system';
const StyledButton = styled('button')({
  backgroundColor: (props) => (props.disabled ? 'gray' : 'blue'),
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
});
function MyComponent() {
  return <StyledButton disabled>Disabled button</StyledButton>;
}

MUI, стилизованный с помощью TypeScript, предоставляет универсальное и надежное решение для стилизации компонентов React. В этой статье мы рассмотрели различные методы использования стилей MUI, включая встроенные стили, расширение существующих компонентов, темы и стили на основе свойств. Используя MUI Styled, вы можете добиться легко настраиваемых и удобных в обслуживании стилей в своих приложениях React.