> For the complete documentation index, see [llms.txt](https://petercheng7788.gitbook.io/developer-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://petercheng7788.gitbook.io/developer-note/frontend/css/css-in-js/material-ui.md).
# 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 (
{children}
);
}
```
* 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 (