Kako dodati Material UI u svoje projekte

Jedna od najpopularnijih React biblioteka komponenti je Material UI (MUI). Dolazi s gotovim komponentama koje slijede Googleova Material Design pravila. Ovaj vodič će vam pokazati kako dodati MUI u svoj Next.js ili React projekt.

Kako dodati MUI u React projekt

Ako želite dodati Material UI u standardnu React aplikaciju napravljenu s Viteom ili Create React Appom, napravite sljedeće korake.

Postavljanje osnovnih paketa

Instalirajte MUI i sve njegove peer ovisnosti:

# Korištenjem npm-a
npm install @mui/material @emotion/react @emotion/styled

# Korištenjem yarna
yarn add @mui/material @emotion/react @emotion/styled

Instalacija fontova (opcionalno)

Roboto font najbolje izgleda s MUI komponentama. Instalirajte ga kao paket:

# Korištenjem npm-a
npm install @fontsource/roboto

# Korištenjem yarna
yarn add @fontsource/roboto

U vašoj main.tsx ili index.tsx datoteci dodajte sljedeće linije za uvoz težina fonta:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Instalacija ikona (opcionalno)

Za pristup cijeloj biblioteci ikona, dodajte Material Icons paket:

# Korištenjem npm-a
npm install @mui/icons-material

# Korištenjem yarna
yarn add @mui/icons-material

Postavljanje osnovne teme

Napravite theme.ts datoteku za postavljanje vaše sheme boja i drugih prilagodbi:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

export default theme;

Primjena teme

U App.tsx ili main.tsx datoteci, omotajte svoju aplikaciju u ThemeProvider:

import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider } from '@mui/material/styles';

import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* Dijelovi vaše aplikacije */}
    </ThemeProvider>
  );
}

export default App;

CssBaseline osigurava da svi preglednici koriste iste stilove i zadane vrijednosti.

Korištenje komponenti

U svojim React datotekama uvezite i koristite MUI komponente:

import { Box, Button, TextField, Typography } from '@mui/material';

function MyComponent() {
  return (
    <Box>
      <Typography variant="h1">Naslov stranice</Typography>
      <TextField label="Ime" />
      <Button variant="contained">Spremi</Button>
    </Box>
  );
}

Dodatni paketi

Odabir datuma

Dodajte adapter za datume u paket za odabir datuma:

# Korištenjem npm-a
npm install dayjs @mui/x-date-pickers

# Korištenjem yarna
yarn add dayjs @mui/x-date-pickers

Postavite LocalizationProvider oko vaše aplikacije:

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

function App() {
  return <LocalizationProvider dateAdapter={AdapterDayjs}>{/* Vaša aplikacija */}</LocalizationProvider>;
}

Data Grid

Za tablice koje se mogu sortirati, filtrirati i straničiti:

# Korištenjem npm-a
npm install @mui/x-data-grid

# Korištenjem yarna
yarn add @mui/x-data-grid

Dodavanje MUI-ja u Next.js projekt

Zbog server-side renderiranja, Next.js zahtijeva dodatno postavljanje. App Router treba posebno rukovanje Emotionovim CSS cacheom.

Instalacija paketa

Postavite MUI Next.js paket za integraciju:

npm install @emotion/react @emotion/styled @mui/material
npm install @mui/material-nextjs
npm install @mui/icons-material

Postavljanje Theme Providera

Napravite klijentsku komponentu u src/app/providers.tsx:

'use client';

import { PropsWithChildren } from 'react';

import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
import { ThemeProvider } from '@mui/material/styles';

import theme from '@/styles/themes';

const Providers = ({ children }: PropsWithChildren) => {
  return (
    <AppRouterCacheProvider>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </AppRouterCacheProvider>
  );
};

export default Providers;

AppRouterCacheProvider brine se za Emotionov CSS cache za App Router. Ovo sprječava nepodudaranja hidratacije između serverskog i klijentskog renderiranja.

Struktura teme

Dobro organizirana struktura teme olakšava održavanje vaših stilova. Napravite mapu za vaše teme s odvojenim datotekama za boje, fontove, breakpointe i prilagodbe komponenti.

Ovako organizirajte vaše datoteke teme:

src/styles/themes/
├── index.ts         # Glavna datoteka teme
├── colors.ts        # Definicije boja
├── palette.ts       # MUI mapiranje palete
├── typography.ts    # Varijante tipografije
├── breakpoints.ts   # Responzivni breakpointi
└── components.ts    # Prilagodbe komponenti

Glavna datoteka teme

Vaša index.ts datoteka spaja sve zajedno:

'use client';

import { createTheme } from '@mui/material';

import breakpoints from './breakpoints';
import components from './components';
import palette from './palette';
import typography from './typography';

const theme = createTheme({
  breakpoints,
  components,
  palette,
  typography,
});

export default theme;

Postavljanje sustava boja

Napravite datoteku colors.ts koja sadrži sve vaše boje. Grupirajte boje u obitelji i ocjenjujte njihov intenzitet od 50 (najsvjetlije) do 950 (najtamnije).

// colors.ts
const colors = {
  // Neutralne sive
  graytone950: '#161616',
  graytone900: '#1f1f1f',
  graytone400: '#888888',
  graytone50: '#f6f6f6',

  // Semantičke boje
  blue500: '#4190ff', // info/linkovi
  green500: '#14b575', // uspjeh
  orange500: '#fa541c', // greška/upozorenje

  // Osnovne
  white: '#fff',
  black: '#111',
};

export default colors;

Postavljanje palete

Dodijelite vaše boje MUI-jevim semantičkim ulogama palete. Ovo omogućuje MUI komponentama automatsko korištenje vaših boja.

// palette.ts
import { ThemeOptions } from '@mui/material';

import colors from './colors';

const palette: ThemeOptions['palette'] = {
  primary: {
    main: colors.graytone950,
    contrastText: colors.graytone50,
  },
  secondary: {
    main: colors.graytone50,
    contrastText: colors.graytone950,
  },
  error: {
    main: colors.orange500,
  },
  success: {
    main: colors.green500,
  },
  info: {
    main: colors.blue500,
  },
};

export default palette;

Postavljanje tipografije

Postavite varijante tipografije kako bi sav tekst u vašoj aplikaciji izgledao dosljedno. Dodajte responzivne promjene za naslove.

// typography.ts
import { TypographyVariantsOptions } from '@mui/material';

const typography: TypographyVariantsOptions = {
  fontFamily: "'Inter', sans-serif",
  h1: {
    fontSize: '64px',
    fontWeight: 500,
    lineHeight: '98%',
    '@media (max-width: 768px)': {
      fontSize: '48px',
    },
  },
  body1: {
    fontSize: '16px',
    lineHeight: 'normal',
  },
  body2: {
    fontSize: '14px',
    lineHeight: '100%',
  },
  button: {
    fontSize: '14px',
    fontWeight: 600,
    textTransform: 'none',
  },
};

export default typography;

Po defaultu, MUI neće mijenjati velika/mala slova teksta gumba ako postavite textTransform na 'none'.

Prilagodbe komponenti

Možete promijeniti zadane stilove bilo koje komponente s MUI-jem. Ovo vam omogućuje potpunu kontrolu nad izgledom i ponašanjem dijelova.

Isključivanje ripple efekata

Za čišći izgled sučelja, isključite ripple efekte za sve gumbe:

MuiButtonBase: {
  defaultProps: {
    disableTouchRipple: true,
    disableRipple: true
  }
}

Prilagođeni stilovi gumba

Napravite gumbe s pozadinama koje mijenjaju boju i efektima pri prelasku mišem:

MuiButton: {
  defaultProps: {
    variant: 'contained',
    size: 'large'
  },
  styleOverrides: {
    root: {
      borderRadius: 16,
      boxShadow: 'none',
      '&:hover': {
        boxShadow: 'none'
      }
    }
  }
}

Najbolje prakse za stiliziranje

Kada koristite MUI, odaberite pravi način stiliziranja za svaku situaciju.

Koristite MUI props za layout: Koristite propse poput direction, spacing, alignItems i justifyContent za postavljanje layouta. Sadržaj dobro funkcionira kao props za komponente.

Koristite CSS ili SCSS module za vizualno stiliziranje: Stilske datoteke trebaju sadržavati boje, pozadine, rubove i animacije. Ovo drži vaše stilove organiziranima i vaš JSX čistim.

Koristite classes prop za specifične promjene: classes prop vam omogućuje promjenu stilova specifičnih MUI komponenti bez korištenja !important.

Izbjegavajte sx prop: sx prop olakšava brzo prototipiranje, ali također miješa logiku stiliziranja u vaše komponente. CSS moduli vam pomažu da stilovi budu organizirani i brige odvojene.

Savjeti za performanse

Nekoliko jednostavnih promjena može napraviti veliku razliku u performansama:

• Kreirajte theme objekt jednom – Korištenje u više renderiranja štedi vrijeme jer se ne moraju ponavljati isti izračuni.
• Isključite ripple efekte – Ovo smanjuje težinu DOM-a i ubrzava rukovanje interakcijama.
• Koristite gradijente umjesto box shadowsa – Gradijenti se brže učitavaju jer koriste GPU akceleraciju.
• Koristite CSS module – Ovo ograničava vaše stilove na specifične dijelove stranice, smanjuje količinu CSS-a koji se šalje i sprječava sukobe stilova.
• Koristite font-display: swap – Učitajte prilagođene fontove iz vašeg public direktorija. Ovo osigurava da tekst ostaje vidljiv dok se fontovi učitavaju.