AIKraft/AI/Войти
AIKraft/Skills/material-ui-styling

material-ui-styling

Выбирает правильный подход к стилизации Material UI (sx, styled, theme overrides, global CSS) согласно официальной документации. Применяется при стилизации компонентов @mui/material, кастомизации тем, переопределении слотов или сравнении sx и styled.

MUMUI official Разработка ★ 99.1k

Что делает навык

Навык помогает выбрать правильный подход к стилизации в Material UI, начиная с наиболее узкой области применения. Он определяет, когда использовать проп sx, функцию styled(), переопределение тем или глобальные стили, следуя официальной документации.

Когда применять

  • Выбор между sx, styled(), theme components или global CSS для изменения внешнего вида компонента.
  • Безопасное переопределение слотов компонента или его состояний.
  • Сравнение семантики sx и styled() для предотвращения ошибок (foot-gun prevention).
  • Кастомизация тем Material UI для всех экземпляров компонентов.

Как работает

  1. Определить область применения изменения: локальная, переиспользуемая или глобальная.
  2. Выбрать приоритетный метод согласно иерархии: sx → styled() → theme components → GlobalStyles.
  3. Для локальных изменений использовать проп sx.
  4. Для переиспользуемых оберток применить функцию styled().
  5. Для изменения всех экземпляров использовать createTheme({ components }).
  6. Для базовых настроек HTML или глобальных стилей использовать GlobalStyles или CssBaseline.

Примеры запросов агенту

Как лучше стилизовать один конкретный компонент Button, чтобы не затрагивать остальные?
В чем разница между использованием sx и styled() для создания переиспользуемого компонента?
Как безопасно переопределить слот Input для всех полей ввода в теме?

Описание составлено по SKILL.md навыка, сверено 08.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «material-ui-styling» из репозитория: # https://github.com/mui/material-ui
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r material-ui-styling/ ~/.claude/skills/material-ui-styling/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.