Material UI

Overview

  • Open-source React component library that implements Google's Material Design

  • Material UI is comprehensive in that it comes packaged with default styles, and is optimized to work with Emotion which allows writing css in js

Customization

Theme Provider

  • ThemeProvider relies on the context feature of React to pass the theme down to the components and override the default palette, font size, ...

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;
import {ThemeProvider} from "@mui/material"

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider theme={theme}>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

  • The theme can also be accessed by using hook

"use client"
import { Button, useTheme } from "@mui/material";
export default function Home() {
  const theme = useTheme();
  console.log("theme", theme.breakpoints.up("lg"));
  return (
    <div>
       <Button variant="contained" >Hello world</Button>
    </div>
  );
}

Styled Function

import * as React from 'react';
import Slider, { SliderProps } from '@mui/material/Slider';
import { alpha, styled } from '@mui/material/styles';

const SuccessSlider = styled(Slider)<SliderProps>(({ theme }) => ({
  width: 300,
  color: theme.palette.success.main,
  '& .MuiSlider-thumb': {
    '&:hover, &.Mui-focusVisible': {
      boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
    },
    '&.Mui-active': {
      boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
    },
  },
}));

export default function StyledCustomization() {
  return <SuccessSlider defaultValue={30} />;
}

Inline props

<Slider defaultValue={30} sx={{ width: 300, color: 'success.main' }} />
PreviousCSS In JSNextReact

Last updated

Was this helpful?