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 JS NextReact

Last updated 1 year ago

Was this helpful?