Размеры компонентов

Библиотека MUI предоставляет гибкую систему управления размерами компонентов, позволяя создавать интерфейсы, адаптированные под различные устройства и контексты использования. Размер компонентов в MUI можно контролировать несколькими способами: через свойства компонентов, через темизацию и через систему sx и стилизации.

Свойства компонентов

Многие компоненты MUI поддерживают стандартное свойство size. Оно часто принимает значения:

  • small — уменьшенный вариант компонента.
  • medium — стандартный размер (по умолчанию).
  • large — увеличенный вариант.

Пример для кнопки Button:

import Button from '@mui/material/Button';

<Button size="small">Маленькая кнопка</Button>
<Button size="medium">Средняя кнопка</Button>
<Button size="large">Большая кнопка</Button>

size влияет на внутренние отступы, размер текста и иногда на размеры иконок внутри компонентов.

Темизация размеров через theme

MUI предоставляет возможность глобально настраивать размеры компонентов через объект темы. В объекте темы можно переопределить стандартные размеры для компонентов, таких как Button, TextField, Select и других.

Пример настройки темы:

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

const theme = createTheme({
  components: {
    MuiButton: {
      defaultProps: {
        size: 'large',
      },
      styleOverrides: {
        root: {
          borderRadius: '12px',
          padding: '12px 24px',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>Кнопка с кастомным размером</Button>
</ThemeProvider>

Важно: styleOverrides позволяет изменять не только padding и размеры, но и шрифты, иконки и другие свойства, связанные с визуальным представлением.

Использование системы sx и CSS-in-JS

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

Пример:

import Box from '@mui/material/Box';

<Box
  sx={{
    width: 300,
    height: 100,
    p: 2,       // padding
    fontSize: 18,
  }}
>
  Компонент с кастомными размерами
</Box>

Box — универсальный компонент контейнера, поддерживающий любые CSS-свойства через sx. Через него легко настраивать размеры любых других компонентов, оборачивая их в Box или применяя sx напрямую.

Адаптивные размеры

Для адаптивного дизайна MUI предлагает систему breakpoints. Она позволяет задавать размеры компонентов, которые будут меняться в зависимости от ширины экрана.

Пример:

<Box
  sx={{
    width: {
      xs: 100,  // на мобильных устройствах
      sm: 200,  // на планшетах
      md: 300,  // на десктопах
    },
    height: {
      xs: 50,
      sm: 75,
      md: 100,
    },
  }}
>
  Адаптивный Box
</Box>

С помощью такой системы легко строить интерфейсы, которые выглядят гармонично на всех устройствах.

Размеры текстовых компонентов

Компоненты Typography и Button имеют предопределённые размеры текста, которые зависят от свойства variant и size.

Пример:

import Typography from '@mui/material/Typography';

<Typography variant="h4">Заголовок H4</Typography>
<Typography variant="body1" fontSize="14px">Текст body1 с кастомным размером</Typography>

Через fontSize в sx или в Typography можно полностью контролировать размер шрифта, при этом сохраняя согласованность с общей темой.

Размеры иконок

Для компонентов с иконками (IconButton, SvgIcon) размеры тоже можно контролировать через свойство fontSize или через size:

import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

<IconButton size="small">
  <MenuIcon fontSize="small" />
</IconButton>

<IconButton size="large">
  <MenuIcon fontSize="large" />
</IconButton>

Совет: использовать одинаковые значения size и fontSize для кнопок и иконок, чтобы визуально они выглядели пропорционально.

Пользовательские размеры

Если ни стандартные размеры, ни тема не подходят, MUI позволяет задавать любые размеры вручную через sx, style или styled. Например:

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

const CustomButton = styled(Button)({
  width: '250px',
  height: '60px',
  fontSize: '18px',
  borderRadius: '8px',
});

<CustomButton>Кнопка с уникальными размерами</CustomButton>

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

Итоговые рекомендации по работе с размерами

  1. Использовать свойство size для стандартных настроек.
  2. Применять тему для глобальных изменений размеров компонентов.
  3. Использовать sx и styled для детальной настройки отдельных элементов.
  4. Для адаптивного дизайна — breakpoints в sx.
  5. Сохранять согласованность размеров текста и иконок, чтобы интерфейс выглядел гармонично.

Размеры компонентов в MUI — это комбинация удобных стандартных настроек и гибких инструментов кастомизации, что делает библиотеку мощным инструментом для построения современных интерфейсов.

Оглавление