M
mui
Wzorce Material-UI v7 — stylizacja sx prop, tematy i responsywny design dla React
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do pracy z Material-UI v7 zawierający gotowe wzorce komponentów, stylizację za pomocą sx prop, integrację tematów i responsywny design. Użyj go gdy pracujesz z komponentami MUI (Box, Grid, Paper, Typography), dostosowujesz wygląd poprzez sx, konfiguruj motywy lub wykorzystujesz hooki specyficzne dla MUI. Zawiera aktualne rozwiązania dla zmian w v7, takie jak nowy system slots i slotProps oraz obsługa CSS layers.
Jak używać
- 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.