MUI jest popularną biblioteką komponentów React(na dzień dzisiejszy -02.09.2024- na npm Weekly Downloads 2310,257 ), która implementuje Google’s Material Design, zapewniając gotowe, funkcjonalne komponenty.

MUI można zintegrować z aplikacją NextJs

Instalacja

Z godnie z dokumentacją, instalujemy po koleji:

npm install @mui/material @emotion/react @emotion/styled

Plus dodatki z których chcemy skorzystać,ja skorzystałem z tych:

npm install @fontsource/roboto
npm install @mui/icons-material

Podstawowe użycie

Możemy wykorzystywać komponenty w każdym miejscu aplikacji, np:

import * as React from 'react';
import Button from '@mui/material/Button';

export default function BasicButton() {
  return (
    <Button variant="contained" color="primary">
      Kliknij mnie
    </Button>
  );
}

Layout

System Grid w MUI bazuje na flexboxie i pozwala na tworzenie layoutów o różnej złożoności. Siatka dzieli przestrzeń na 12 równych kolumn. Podstawowym komponentem siatki jest Grid, który może pełnić rolę kontenera (container) oraz elementu (item). Kontener określa obszar, w którym będą umieszczone elementy siatki, natomiast elementy to konkretne bloki (kolumny) wewnątrz tego kontenera.

Przykład układu 3 kolumnowego:

import React from 'react';
import Grid from '@mui/material/Grid';

function ThreeColumnLayout() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={4}>
        Pierwsza kolumna
      </Grid>
      <Grid item xs={12} sm={4}>
        Druga kolumna
      </Grid>
      <Grid item xs={12} sm={4}>
        Trzecia kolumna
      </Grid>
    </Grid>
  );
}

export default ThreeColumnLayout;

Container

Container w MUI jest komponentem Grid, który służy jako rodzic dla elementów siatki. Jego głównym zadaniem jest definiowanie obszaru, w którym umieszczone zostaną items (elementy). Kontener kontroluje rozłożenie wewnętrznych elementów poprzez system kolumn oraz zarządza odstępami (spacing) pomiędzy nimi.

Item

Item również jest komponentem Grid, ale służy jako poszczególny element wewnątrz kontenera. Każdy item może zajmować określoną liczbę kolumn w zależności od rozmiaru ekranu, co określa się za pomocą propsów takich jak xs, sm, md itd.

Breakpoints

MUI używa systemu breakpointów (xs, sm, md, lg, xl), które pozwalają określić, jak komponenty mają się zachowywać na różnych rozmiarach ekranu

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

Więcej w dokumentacji

Spacing

Parametr spacing w Grid container pozwala na dodanie odstępu pomiędzy elementami siatki. Jest to bardzo wygodne do szybkiego dodawania marginesów bez konieczności ręcznego stylizowania każdego z elementów. Więcej w dokumentacji

Główne komponenty

Typography

Komponent Typography służy do prezentacji tekstu w sposób. Pozwala na efektywne zarządzanie wszystkimi tekstowymi aspektami interfejsu użytkownika

Przykład użycia:

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

function TypographyExample() {
  return (
    <div>
      <Typography variant="h1">Nagłówek 1</Typography>
      <Typography variant="subtitle1">Podtytuł</Typography>
      <Typography variant="body1">To jest główny tekst twojej zawartości.</Typography>
    </div>
  );
}

Wartości variant reprezentują określony styl typograficzny, który jest zdefiniowany w bibliotece MUI. Oto lista najczęściej używanych wariantów w Typography:

• h1, h2, h3, h4, h5, h6: Reprezentują różne poziomy nagłówków, gdzie h1 jest największym i najbardziej dominującym nagłówkiem, a h6 najmniejszym.
• subtitle1, subtitle2: Służą do stylizacji mniejszych nagłówków lub podtytułów, które są mniej dominujące niż główne nagłówki.
• body1, body2: Standardowe style dla głównego tekstu; body1 jest zwykle używany dla głównego ciała tekstu, a body2 dla mniejszego tekstu pomocniczego.
• caption: Stosowany do bardzo małego tekstu, jak podpisy pod zdjęciami lub informacje pomocnicze.
• button: Specjalny styl używany do tekstu w przyciskach.
• overline: Styl tekstu nad linią, często używany do metadanych lub kategorii.

Możemy zmienić zdefiniowane style w pliku theme:

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

const theme = createTheme({
  typography: {
    h1: {
      fontSize: '2.5rem',
      fontWeight: 'lighter',
      color: 'navy'
    }
  }
});

Paper

Paper jest komponentem, który symuluje fizyczny arkusz papieru. Posiada cień i zaokrąglone rogi, co nadaje mu głębi i podnosi estetykę interfejsu. Idealnie nadaje się do izolowania sekcji treści, formularzy lub paneli informacyjnych.

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

function PaperExample() {
  return (
    <Paper elevation={3}>
      <Typography variant="body1" component="div" p={2}>
        To jest zawartość na papierze z dodatkowym cieniem.
      </Typography>
    </Paper>
  );
}

AppBar

AppBar to komponent używany głównie do nawigacji i może służyć jako kontener na pasek narzędzi, logo, przyciski nawigacyjne, tytuł strony lub elementy sterujące.

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

function AppBarExample() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">
          Nazwa strony
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

CssBaseline

CssBaseline to komponent, który pomaga w normalizacji i ujednoliceniu stylów na różnych przeglądarkach.

• Usuwa domyślne marginesy, paddingi i inne style, które różne przeglądarki nakładają na elementy HTML, zapewniając spójny punkt wyjścia dla projektowania interfejsu.
• Ustawia domyślne fonty, rozmiary czcionek i inne właściwości typograficzne, aby zapewnić spójność wizualną w całej aplikacji.

CssBaseline jest zwykle dodawany na samym początku drzewa komponentów Twojej aplikacji React, aby upewnić się, że jego style są stosowane globalnie i jako pierwsze.

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

function MyApp() {
  return (
   ...
      <CssBaseline/>
    ...
  );
}

Theme.ts

Plik ten służy do centralnego zarządzania wyglądem aplikacji. Definiuje globalne style, takie jak kolory, czcionki i zachowania poszczególnych komponentów Material UI.

Przykład:

'use client';
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const theme = createTheme({
  palette: {
    mode: 'light',
  },
  typography: {
    fontFamily: roboto.style.fontFamily,
  }
});

export default theme;

ThemeProvider

Komponent służący do wstrzyknięcia motywu do aplikacji. Umożliwia to zastosowanie spersonalizowanego motywu globalnie w całej aplikacji lub w jej wybranej części. Jest używany przede wszystkim w pliku głównym aplikacji.

styled

Funkcja styled umożliwia tworzenie stylizowanych komponentów React, łącząc logikę komponentów z własnościami CSS. Funkcja ta przyjmuje jako pierwszy argument komponent bazowy, a jako drugi – obiekt lub funkcję definiującą style.

Na przykładzie, możemy stylizować przycisk:

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

const CustomButton = styled(Button)({
  backgroundColor: 'navy',
  color: 'white',
  padding: '10px 20px',
  '&:hover': {
    backgroundColor: 'darkblue'
  }
});

function App() {
  return <CustomButton>Kliknij mnie</CustomButton>;
}

W tym przykładzie, CustomButton rozszerza komponent Button, w którym zmieniliśmy tło, koloru tekstu, padding oraz efektu hover. Dzięki styled możemy łatwo modyfikować istniejące komponenty, dodawać im specyficzne style i utrzymywać spójność wizualną w całej aplikacji.