Material UI

PreviousCSS In JS NextReact

Last updated 6 months ago

Was this helpful?

Material UI

Overview

Open-source React component library that implements Google's
Material UI is comprehensive in that it comes packaged with default styles, and is optimized to work with which allows writing css in js

Customization

Theme Provider

ThemeProvider relies on the 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 6 months ago

Was this helpful?

Overview

Open-source React component library that implements Google's
Material UI is comprehensive in that it comes packaged with default styles, and is optimized to work with which allows writing css in js

Customization

Theme Provider

ThemeProvider relies on the 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' }} />