Material UI Cheat Sheet

Covers installing MUI, theming with ThemeProvider, the sx prop, responsive breakpoints, and commonly used React components.

2 PagesIntermediateMar 20, 2026

Installation & Theming

Setting up MUI and a custom ThemeProvider.

javascript

// npm install @mui/material @emotion/react @emotion/styledimport { createTheme, ThemeProvider } from '@mui/material/styles';import CssBaseline from '@mui/material/CssBaseline';const theme = createTheme({  palette: {    mode: 'light',    primary: { main: '#1976d2' },  },  typography: {    fontFamily: 'Roboto, sans-serif',  },});function App({ children }) {  return (    <ThemeProvider theme={theme}>      <CssBaseline /> {/* normalizes browser default styles */}      {children}    </ThemeProvider>  );}

The sx Prop

Inline, theme-aware styling shorthand.

javascript

import Box from '@mui/material/Box';<Box  sx={{    display: 'flex',    p: 2,                 // padding: theme.spacing(2)    m: { xs: 1, md: 3 },   // responsive margin per breakpoint    bgcolor: 'primary.main',    borderRadius: 1,    '&:hover': { opacity: 0.8 }, // pseudo-class selector  }}>  Content</Box>

Common Components

Layout, form, and navigation building blocks.

javascript

import { Button, TextField, Grid, AppBar, Toolbar, Typography } from '@mui/material';function Form() {  return (    <>      <AppBar position="static">        <Toolbar>          <Typography variant="h6">My App</Typography>        </Toolbar>      </AppBar>      <Grid container spacing={2}>        <Grid item xs={12} sm={6}>          <TextField label="Name" fullWidth variant="outlined" />        </Grid>        <Grid item xs={12} sm={6}>          <Button variant="contained" color="primary" type="submit">            Submit          </Button>        </Grid>      </Grid>    </>  );}

MUI System & Breakpoints

Theme utilities for responsive design.

theme.breakpoints.up('md')- targets viewports at or above the md breakpoint (900px by default)
useTheme()- hook that returns the active theme object inside a component
useMediaQuery(theme.breakpoints.down('sm'))- hook returning a boolean for JS-level responsive logic
styled(Component)- creates a styled component with full access to the theme
theme.spacing(n)- converts a spacing unit (8px by default) into a pixel/rem value
Stack- flexbox layout helper with direction and spacing props for evenly gapped children

Pro Tip

Prefer the sx prop or styled() over inline style objects: sx integrates with the theme (spacing, palette, breakpoints) and is optimized by the MUI babel plugin, unlike plain style objects which bypass theming entirely.

Was this cheat sheet helpful?

Sass/SCSS Cheat Sheet

Chakra UI Cheat Sheet

Explore Topics

#MaterialUI#MaterialUICheatSheet#WebDevelopment#Intermediate#InstallationTheming#TheSxProp#CommonComponents#MUISystemBreakpoints#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services