Кастомизация внешнего вида

Библиотека MUI (Material-UI) предоставляет гибкий подход к изменению внешнего вида компонентов через тему, sx-пропсы, styled-компоненты и CSS-in-JS. Каждый из этих методов позволяет управлять стилями как на глобальном, так и на локальном уровне.

Использование темы

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

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
    h1: {
      fontSize: '2rem',
      fontWeight: 700,
    },
  },
  shape: {
    borderRadius: 12,
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary Button</Button>
      <Button color="secondary">Secondary Button</Button>
    </ThemeProvider>
  );
}

Ключевые моменты:

  • palette управляет цветами компонентов и фона.
  • typography позволяет задать глобальные шрифты и стили заголовков.
  • shape изменяет формы, например, скругление углов.

Переопределение стилей отдельных компонентов (Component Overrides)

MUI позволяет изменять стили конкретных компонентов через components в теме:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: 20,
        },
        containedPrimary: {
          backgroundColor: '#0d47a1',
          '&:hover': {
            backgroundColor: '#1565c0',
          },
        },
      },
    },
  },
});

Особенности:

  • styleOverrides заменяет стандартные стили.
  • Можно изменять отдельные варианты (containedPrimary, outlinedSecondary).
  • Поддерживаются псевдоклассы (&:hover, &:focus).

Стили через sx пропс

Проп sx обеспечивает локальную кастомизацию и сочетает возможности CSS и темы:

<Button
  sx={{
    backgroundColor: 'secondary.main',
    '&:hover': {
      backgroundColor: 'secondary.dark',
    },
    padding: '12px 24px',
  }}
>
  Custom SX Button
</Button>

Преимущества sx:

  • Поддержка вложенных селекторов.
  • Доступ к значениям из темы (primary.main, spacing(2)).
  • Можно комбинировать с responsive-стилями:
<Box sx={{ width: { xs: 100, sm: 200, md: 300 } }} />

Styled-компоненты в MUI

MUI предоставляет функцию styled, которая позволяет создавать полностью кастомные компоненты с применением темы:

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const CustomButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  borderRadius: 50,
  color: '#fff',
  padding: theme.spacing(2, 4),
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
}));

<CustomButton>Styled Button</CustomButton>

Особенности:

  • Можно использовать доступ к объекту темы (theme).
  • Легко создавать повторно используемые кастомные компоненты.
  • Поддержка псевдоклассов и медиа-запросов.

Глобальные стили через GlobalStyles

Для глобального влияния на CSS можно использовать компонент GlobalStyles:

import { GlobalStyles } from '@mui/material';

<GlobalStyles styles={{
  body: {
    margin: 0,
    fontFamily: 'Roboto, sans-serif',
    backgroundColor: '#f5f5f5',
  },
  a: {
    textDecoration: 'none',
    color: 'inherit',
  },
}} />

Преимущества:

  • Можно переопределить базовые HTML-элементы.
  • Применяется глобально ко всем компонентам.

Кастомизация через makeStyles (legacy)

Хотя MUI рекомендует sx и styled, makeStyles из пакета @mui/styles всё ещё используется:

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
  button: {
    backgroundColor: theme.palette.secondary.main,
    padding: theme.spacing(2),
    '&:hover': {
      backgroundColor: theme.palette.secondary.dark,
    },
  },
}));

function App() {
  const classes = useStyles();
  return <Button className={classes.button}>Legacy Button</Button>;
}

Особенности:

  • Подходит для проектов с устаревшим кодом.
  • Стили генерируются как CSS-классы.
  • Менее гибкий по сравнению с sx и styled.

Рекомендации по кастомизации

  1. Использовать тему для глобальных изменений — единый источник истины для цветов, шрифтов и форм.
  2. sx и styled для локальных изменений — точечная кастомизация без создания множества новых CSS-файлов.
  3. Минимизировать прямой CSS — MUI строится вокруг CSS-in-JS, что упрощает поддержку и переиспользование.
  4. Псевдоклассы и медиа-запросы — применяются через sx или styled, обеспечивая адаптивность интерфейса.
  5. Совмещение методов — можно комбинировать theme, sx, styled и GlobalStyles для максимальной гибкости.

Эти инструменты создают мощную систему кастомизации, позволяя проектировать интерфейсы в строгом соответствии с корпоративным стилем и одновременно сохранять преимущества Material Design.

Оглавление