Кастомные иконки для выбора

В библиотеке MUI (Material-UI) компоненты, такие как Checkbox, Radio и Switch, предоставляют возможность использовать собственные иконки вместо стандартных, что позволяет создавать уникальный визуальный стиль и адаптировать интерфейс под дизайн проекта.

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

Компонент Checkbox поддерживает два ключевых свойства для иконок:

  • icon – отображаемая иконка в невыбранном состоянии.
  • checkedIcon – отображаемая иконка в выбранном состоянии.

Пример применения:

import Checkbox from '@mui/material/Checkbox';
import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
import Favorite from '@mui/icons-material/Favorite';

function CustomCheckbox() {
  return (
    <Checkbox
      icon={<FavoriteBorder />}
      checkedIcon={<Favorite />}
      color="secondary"
    />
  );
}

В этом примере стандартные галочки заменяются иконками сердца. color="secondary" позволяет использовать вторичный цвет темы, но цвет иконок можно полностью кастомизировать через sx или стиль иконки.

Кастомизация Radio

Для радиокнопок (Radio) используется аналогичная концепция:

  • icon – состояние неактивной радиокнопки.
  • checkedIcon – состояние активной радиокнопки.

Пример:

import Radio from '@mui/material/Radio';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';

function CustomRadio() {
  return (
    <Radio
      icon={<RadioButtonUncheckedIcon />}
      checkedIcon={<RadioButtonCheckedIcon />}
    />
  );
}

Можно использовать не только иконки из @mui/icons-material, но и любые SVG-компоненты или даже собственные React-компоненты.

Switch с кастомными элементами

Компонент Switch позволяет задавать свои визуальные элементы через icon и checkedIcon, но чаще всего кастомизация делается через styled и внутренние псевдоэлементы.

Пример кастомного Switch:

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

const CustomSwitch = styled(Switch)(({ theme }) => ({
  width: 62,
  height: 34,
  padding: 7,
  '& .MuiSwitch-switchBase': {
    margin: 1,
    padding: 0,
    transform: 'translateX(6px)',
    '&.Mui-checked': {
      transform: 'translateX(22px)',
      color: '#fff',
      '& + .MuiSwitch-track': {
        backgroundColor: theme.palette.primary.main,
        opacity: 1,
        border: 0,
      },
    },
  },
  '& .MuiSwitch-thumb': {
    backgroundColor: '#fff',
    width: 32,
    height: 32,
  },
  '& .MuiSwitch-track': {
    borderRadius: 20 / 2,
    backgroundColor: '#bdbdbd',
    opacity: 1,
    transition: theme.transitions.create(['background-color'], {
      duration: 500,
    }),
  },
}));

function AppSwitch() {
  return <CustomSwitch />;
}

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

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

Для полной кастомизации можно создать собственные SVG-иконки и передавать их в свойства icon и checkedIcon:

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

const CustomUnchecked = () => (
  <svg width="24" height="24">
    <circle cx="12" cy="12" r="10" stroke="gray" strokeWidth="2" fill="none" />
  </svg>
);

const CustomChecked = () => (
  <svg width="24" height="24">
    <circle cx="12" cy="12" r="10" fill="blue" />
    <path d="M8 12l2 2 4-4" stroke="white" strokeWidth="2" />
  </svg>
);

function SvgCheckbox() {
  return <Checkbox icon={<CustomUnchecked />} checkedIcon={<CustomChecked />} />;
}

SVG полностью контролируется через React, что позволяет менять форму, цвет, размер, анимацию и другие свойства динамически.

Динамическая замена иконок

Компоненты MUI позволяют менять иконки во время выполнения, используя состояние React:

import Checkbox from '@mui/material/Checkbox';
import { useState } from 'react';
import StarBorder from '@mui/icons-material/StarBorder';
import Star from '@mui/icons-material/Star';

function DynamicIconCheckbox() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onCha nge={() => setChecked(!checked)}
      icon={checked ? <Star /> : <StarBorder />}
      checkedIcon={<Star />}
    />
  );
}

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

Итоговые принципы

  1. Использование icon и checkedIcon – базовый способ кастомизации.
  2. Применение styled и sx – для полного контроля внешнего вида, включая размеры, цвета и анимацию.
  3. Поддержка любых React-компонентов и SVG – возможность использовать не только стандартные иконки.
  4. Динамическая подмена иконок через состояние – для интерактивных интерфейсов и визуальных эффектов.

Такой подход к кастомным иконкам делает MUI гибким инструментом для реализации уникального дизайна компонентов выбора.

Оглавление