Material UI: Components & Theming

Material UI (MUI) is the most popular React UI component library, implementing Google's Material Design. MUI v5+ uses Emotion for styling and provides a powerful theme system.

Installation

npm install @mui/material @emotion/react @emotion/styled
# Icons (optional but commonly used)
npm install @mui/icons-material
# Date pickers
npm install @mui/x-date-pickers

Core Components

import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Paper from '@mui/material/Paper'
import Chip from '@mui/material/Chip'
import Avatar from '@mui/material/Avatar'
import CircularProgress from '@mui/material/CircularProgress'
import Tooltip from '@mui/material/Tooltip'
import IconButton from '@mui/material/IconButton'
import DeleteIcon from '@mui/icons-material/Delete'

// Button variants
<Button variant="contained" color="primary">Save</Button>
<Button variant="outlined" color="error" startIcon={<DeleteIcon />}>Delete</Button>
<Button variant="text" disabled>Disabled</Button>
<IconButton aria-label="delete"><DeleteIcon /></IconButton>

// Layout
<Stack direction="row" spacing={2} alignItems="center">
  <Avatar src="/avatar.png" alt="Alice" />
  <Typography variant="h6">Alice</Typography>
  <Chip label="Admin" color="primary" size="small" />
</Stack>

// Tooltip
<Tooltip title="Delete this item" placement="top">
  <IconButton><DeleteIcon /></IconButton>
</Tooltip>

Theme Setup

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

const theme = createTheme({
  palette: {
    mode: 'light',  // or 'dark'
    primary: {
      main: '#1976d2',
      light: '#42a5f5',
      dark: '#1565c0',
    },
    secondary: {
      main: '#9c27b0',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", sans-serif',
    h1: { fontSize: '2.5rem', fontWeight: 700 },
    body1: { fontSize: '1rem', lineHeight: 1.6 },
  },
  shape: {
    borderRadius: 8,
  },
  spacing: 8,  // base spacing unit in px (theme.spacing(2) = 16px)
})

// Wrap app
function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />  {/* normalize CSS + apply background color */}
      <MyApp />
    </ThemeProvider>
  )
}

Dark Mode

const [mode, setMode] = useState<'light' | 'dark'>('light')

const theme = useMemo(() => createTheme({
  palette: { mode }
}), [mode])

// Toggle
<IconButton onClick={() => setMode(m => m === 'light' ? 'dark' : 'light')}>
  {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
</IconButton>