Material UI

Overview

Customization

Theme Provider

defaultTheme.ts
import { createTheme } from "@mui/material";
import { purple } from "@mui/material/colors";
const theme = createTheme({
   palette:{
    primary:purple,
   },
   typography: {
    fontFamily: "sans-serif",
    fontSize: 12,
    h3 : {
        fontSize: '1.2rem',
        '@media (min-width:600px)': {
            fontSize: '1.5rem',
        },
    }
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
})

export default theme;
  • The theme can also be accessed by using hook

Styled Function

Inline props

Last updated