M
mui
Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.
How to use
- Zainstaluj skill w swoim projekcie Claude/Codex — dodaj repozytorium davila7/claude-code-templates do ścieżki umiejętności development/mui.
- Zaimportuj komponenty MUI i typy SxProps z pakietu @mui/material — unikaj deep imports, które nie działają w v7, korzystaj z package exports.
- Zdefiniuj obiekty stylów na górze komponentu, używając Record<string, SxProps
> — grupuj style logicznie (container, header, button itp.). - Zastosuj style do komponentów poprzez prop sx={styles.nazwaStyleu} — sx prop obsługuje wszystkie właściwości CSS oraz responsywne breakpointy MUI.
- Dla responsywnego designu używaj breakpointów MUI w sx — przykład: { display: 'flex', flexDirection: { xs: 'column', md: 'row' } } dla mobilnych i desktopowych widoków.
- Jeśli dostosowujesz temat, pamiętaj o nowych wzorcach v7 — wszystkie komponenty używają standardowego systemu slots i slotProps zamiast starszych podejść z v6.