# Material UI

## Overview

* Open-source React component library that implements Google's [Material Design](https://m2.material.io/)
* Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/docs/introduction) which allows writing css in js

## Customization

### Theme Provider

* `ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components and override the default palette, font size, ...

{% code title="defaultTheme.ts" %}
```typescript
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;
```
{% endcode %}

```tsx
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

```tsx
"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

```tsx
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

```tsx
<Slider defaultValue={30} sx={{ width: 300, color: 'success.main' }} />
```
