### MUI Loading Button Examples

Source: https://v5.mui.com/material-ui/react-button

Demonstrates different configurations of the MUI LoadingButton component, including basic loading, loading with indicator, and loading with start icon.

```jsx
<LoadingButton loading variant="outlined">
  Submit
</LoadingButton>
<LoadingButton loading loadingIndicator="Loading…" variant="outlined">
  Fetch data
</LoadingButton>
<LoadingButton
  loading
  loadingPosition="start"
  startIcon={<SaveIcon />}
  variant="outlined">
  Save
</LoadingButton>
```

--------------------------------

### Create React App Setup

Source: https://v5.mui.com/material-ui/experimental-api/classname-generator

Integrates the ClassNameGenerator setup by importing the initializer file in the `index.js` file for Create React App.

```javascript
+import './MuiClassNameSetup';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';

 ReactDOM.render(<App />);
```

--------------------------------

### Install Material UI

Source: https://v5.mui.com/material-ui

Install the Material UI library and its peer dependencies using npm.

```bash
$ npm install @mui/material @emotion/react @emotion/styled
```

--------------------------------

### Install v1.x alongside v0.x with npm

Source: https://v5.mui.com/material-ui/migration/migration-v0x

Install the v1.x version of Material UI alongside the v0.x version using npm.

```bash
npm install material-ui
npm install @material-ui/core
```

--------------------------------

### Basic Popper Example

Source: https://v5.mui.com/material-ui/react-popper

A simple example demonstrating how to toggle a Popper component. It requires state management for 'open' and 'anchorEl'.

```jsx
<button aria-describedby={id} type="button" onClick={handleClick}>
  Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
  <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
    The content of the Popper.
  </Box>
</Popper>
```

--------------------------------

### Install v1.x alongside v0.x with Yarn

Source: https://v5.mui.com/material-ui/migration/migration-v0x

Install the v1.x version of Material UI alongside the v0.x version using Yarn.

```bash
yarn add material-ui
yarn add @material-ui/core
```

--------------------------------

### Customized Timeline Example

Source: https://v5.mui.com/material-ui/react-timeline

An example demonstrating customization of the timeline component, including custom content and styling.

```jsx
<Timeline position="alternate">
  <TimelineItem>
    <TimelineOppositeContent color="text.secondary">
      9:30 am
    </TimelineOppositeContent>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Eat</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineOppositeContent color="text.secondary">
      10:00 am
    </TimelineOppositeContent>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Code</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineOppositeContent color="text.secondary">
      Sleep
    </TimelineOppositeContent>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Because you need rest</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineOppositeContent color="text.secondary">
      Repeat
    </TimelineOppositeContent>
    <TimelineSeparator>
      <TimelineDot />
    </TimelineSeparator>
    <TimelineContent>Because this is the life you love!</TimelineContent>
  </TimelineItem>
</Timeline>
```

--------------------------------

### Add Item Button Examples

Source: https://v5.mui.com/material-ui

Examples of different button variants with an icon for adding items.

```jsx
<Button variant="text" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
```

```jsx
<Button variant="contained" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
```

```jsx
<Button variant="outlined" startIcon={<ShoppingCartRounded />}>
  Add item
</Button>
```

--------------------------------

### Install Material UI with styled-components

Source: https://v5.mui.com/material-ui/getting-started/installation

Install Material UI along with the styled-components engine if you prefer it over Emotion. Note compatibility issues with SSR.

```bash
npm install @mui/material @mui/styled-engine-sc styled-components
```

--------------------------------

### Install RTL Plugin

Source: https://v5.mui.com/material-ui/customization/right-to-left

Installs the necessary stylis and stylis-plugin-rtl packages for RTL support.

```bash
npm install stylis stylis-plugin-rtl
```

--------------------------------

### TextField with Start Adornment

Source: https://v5.mui.com/material-ui/react-text-field

Demonstrates how to add an icon to the start of a TextField using the 'InputProps' and 'startAdornment' properties.

```jsx
<TextField
  label="With sx"
  id="filled-start-adornment-with-sx"
  sx={{
    '& .MuiTextField-root': {
      width: '25ch',
    },
  }}
  InputProps={{
    startAdornment: <InputAdornment position="start">kg</InputAdornment>,
  }}
  variant="filled"
/>
```

--------------------------------

### Install Material UI

Source: https://v5.mui.com/material-ui

Install the Material UI core package along with its peer dependencies for styling.

```bash
npm install @mui/material @emotion/react @emotion/styled
```

--------------------------------

### Install Material UI v5 packages

Source: https://v5.mui.com/material-ui/migration/migration-v4

Install the core Material UI v5 packages and the new @mui/styles package.

```bash
npm install @mui/material@^5.0.0 @mui/styles@^5.0.0
```

--------------------------------

### Install Material UI Lab and Core

Source: https://v5.mui.com/material-ui/about-the-lab

Installs the Material UI lab package (version 5.0.0-alpha) and the core Material UI package (version 5.0.0) using npm.

```bash
npm install @mui/lab@^5.0.0-alpha @mui/material@^5.0.0
```

--------------------------------

### Install Material UI v5 Lab packages

Source: https://v5.mui.com/material-ui/migration/migration-v4

Install the new @mui/lab package for v5 if you were using @material-ui/lab.

```bash
npm install @mui/lab@^5.0.0-alpha
```

--------------------------------

### Folder List Example

Source: https://v5.mui.com/material-ui/react-list

Displays a folder list structure with dates.

```jsx
  * Photos
Jan 9, 2014
  * Work
Jan 7, 2014
  * Vacation
July 20, 2014

```

--------------------------------

### Importing v0.x and v1.x components

Source: https://v5.mui.com/material-ui/migration/migration-v0x

Example of importing components from both v0.x and v1.x Material UI versions.

```javascript
import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from '@material-ui/core/Button'; // v1.x
```

--------------------------------

### Install @mui/icons-material

Source: https://v5.mui.com/material-ui/material-icons

Install the necessary Material UI and Material Icons packages using npm, yarn, or pnpm. Ensure you have the correct versions installed.

```bash
npm install @mui/icons-material@^5.0.0 @mui/material@^5.0.0 @emotion/styled @emotion/react
```

--------------------------------

### Import StepButton

Source: https://v5.mui.com/material-ui/api/step-button

Learn about the difference by reading this guide on minimizing bundle size.

```javascript
import StepButton from '@mui/material/StepButton';
// or
import { StepButton } from '@mui/material';
```

--------------------------------

### Install tss-react with yarn

Source: https://v5.mui.com/material-ui/migration/migrating-from-jss

Install the `tss-react` library using yarn. This library is an alternative for using Emotion with a familiar JSS-like syntax.

```bash
yarn add tss-react
```

--------------------------------

### Context Menu

Source: https://v5.mui.com/material-ui/react-menu

An example of a context menu that appears on right-click. It displays sample text content.

```jsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

export default function ContextMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent) => {
    event.preventDefault();
    setAnchorEl({
      mouseX: event.clientX - 2,
      mouseY: event.clientY - 2,
    });
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div onContextMenu={handleClick}>
      <Button variant="contained">Right click me</Button>
      <Menu
        anchorReference="anchorPosition"
        anchorPosition={
          anchorEl
            ? { top: anchorEl.mouseY, left: anchorEl.mouseX }
            : undefined
        }
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'long-button',
        }}
      >
        <MenuItem onClick={handleClose}>Copy</MenuItem>
        <MenuItem onClick={handleClose}>Print</MenuItem>
        <MenuItem onClick={handleClose}>Delete</MenuItem>
      </Menu>
    </div>
  );
}
```

--------------------------------

### Toggle RTL Behavior Example

Source: https://v5.mui.com/material-ui/customization/right-to-left

An interactive example demonstrating how to toggle RTL behavior on and off for components, including normal and 'noflip' behaviors.

```jsx
<FormControlLabel
  control={<Switch onChange={handleChange} />} 
  label="Toggle RTL"
/>
<CacheProvider value={rtl ? rtlCache : ltrCache}>
  <Box sx={{ flexGrow: 1, mx: 2 }} dir={rtl ? 'rtl' : ''}>
    <Normal>RTL normal behavior</Normal>
    <Noflip>RTL noflip</Noflip>
  </Box>
</CacheProvider>
```

--------------------------------

### Basic Timeline Example

Source: https://v5.mui.com/material-ui/react-timeline

A simple timeline displaying a list of events in chronological order.

```jsx
<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Eat</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>Code</TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
    </TimelineSeparator>
    <TimelineContent>Sleep</TimelineContent>
  </TimelineItem>
</Timeline>
```

--------------------------------

### Selected ListItem Example

Source: https://v5.mui.com/material-ui/react-list

Demonstrates how to style a selected list item.

```jsx
* * *

```

--------------------------------

### Next.js Pages Router Setup

Source: https://v5.mui.com/material-ui/experimental-api/classname-generator

Integrates the ClassNameGenerator setup by importing the initializer file in the `_app.js` file for Next.js Pages Router.

```javascript
+import './MuiClassNameSetup';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';

 export default function MyApp(props) {
   const { Component, pageProps } = props;

   return (
     <Component {...pageProps} />
   );
 }
```

--------------------------------

### Install tss-react with npm

Source: https://v5.mui.com/material-ui/migration/migrating-from-jss

Install the `tss-react` library using npm. This library provides a JSS-like API with improved TypeScript support for Emotion.

```bash
npm install tss-react
```

--------------------------------

### Permanent Drawer Example

Source: https://v5.mui.com/material-ui/react-drawer

This snippet demonstrates the structure for a permanent drawer, often used for persistent navigation in applications. It includes example list items for different sections.

```javascript
import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import AppBar from '@mui/material/AppBar';
import CssBaseline from '@mui/material/CssBaseline';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import MailIcon from '@mui/icons-material/Mail';

const drawerWidth = 240;

export default function PermanentDrawerLeft() {
  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
        <Toolbar>
          <Typography variant="h6" noWrap component="div">
            Permanent drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
          },
        }}
      >
        <Toolbar />
        <Box sx={{ overflow: 'auto' }}>
          <List>
            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
              <ListItem key={text} disablePadding>
                <ListItemButton>
                  <ListItemIcon>
                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                  </ListItemIcon>
                  <ListItemText primary={text} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
          <Divider />
          <List>
            {['All mail', 'Trash', 'Spam'].map((text, index) => (
              <ListItem key={text} disablePadding>
                <ListItemButton>
                  <ListItemIcon>
                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                  </ListItemIcon>
                  <ListItemText primary={text} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>
        </Box>
      </Drawer>
      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
        <Toolbar />
        <Typography paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac.
        </Typography>
        <Typography paragraph>
          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
        </Typography>
      </Box>
    </Box>
  );
}
```

--------------------------------

### Import MenuItem

Source: https://v5.mui.com/material-ui/api/menu-item

Learn about the difference between these import methods by reading the guide on minimizing bundle size.

```javascript
import MenuItem from '@mui/material/MenuItem';
// or
import { MenuItem } from '@mui/material';
```

--------------------------------

### Basic Breadcrumbs Example

Source: https://v5.mui.com/material-ui/react-breadcrumbs

Displays a standard breadcrumb trail with links to parent pages and the current page.

```jsx
<Breadcrumbs aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="/">
    MUI
  </Link>
  <Link
    underline="hover"
    color="inherit"
    href="/material-ui/getting-started/installation/"
  >
    Core
  </Link>
  <Typography color="text.primary">Breadcrumbs</Typography>
</Breadcrumbs>
```

--------------------------------

### Configure Babel with babel-plugin-direct-import

Source: https://v5.mui.com/material-ui/guides/minimizing-bundle-size

Use this configuration with `babel-plugin-direct-import` for a more streamlined import process. Ensure `babel-plugin-direct-import` is installed.

```javascript
const plugins = [
  [
    'babel-plugin-direct-import',
    { modules: ['@mui/material', '@mui/icons-material'] },
  ],
];

module.exports = { plugins };

```

--------------------------------

### Theme Configuration Preventing Link-Underline-Hover Codemod

Source: https://v5.mui.com/material-ui/migration/migration-v4

Example of a theme setup where the link-underline-hover codemod should not be run because default props are already configured.

```javascript
// if you have theme setup like this, ❌ don't run this codemod.
// this default props can be removed later because `always` is the default value in v5
createMuiTheme({
  components: {
    MuiLink: {
      defaultProps: {
        underline: 'always',
      },
    },
  },
});
```

--------------------------------

### Importing Setup File

Source: https://v5.mui.com/material-ui/experimental-api/classname-generator

Shows how to import the `MuiClassNameSetup.js` file in your application's root before other Material UI component imports.

```javascript
import './MuiClassNameSetup';
import Button from '@mui/material/Button';
// ...other component imports

function App() {
  return <Button>Text</Button>;
}
```

--------------------------------

### Theme Configuration Preventing Variant-Prop Codemod

Source: https://v5.mui.com/material-ui/migration/migration-v4

Example of a theme setup where the variant-prop codemod should not be run because default props are already configured.

```javascript
// ❌ if you have a theme setup like this, don't run this codemod.
// these default props can be removed later because `outlined` is the default value in v5
createMuiTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
      },
    },
  },
});
```

--------------------------------

### Using v0.x and v1.x ThemeProviders simultaneously

Source: https://v5.mui.com/material-ui/migration/migration-v0x

Demonstrates how to use both v0.x and v1.x MuiThemeProvider components concurrently when migrating a custom theme.

```javascript
import * as React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
import { MuiThemeProvider as V0MuiThemeProvider } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const theme = createMuiTheme({
  /* theme for v1.x */
});
const themeV0 = getMuiTheme({
  /* theme for v0.x */
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <V0MuiThemeProvider muiTheme={themeV0}>{/*Components*/}</V0MuiThemeProvider>
    </MuiThemeProvider>
  );
}

export default App;
```

--------------------------------

### Create Filter Options Factory

Source: https://v5.mui.com/material-ui/react-autocomplete

The `createFilterOptions` factory allows you to customize the default option filtering behavior. This example shows how to create a filter that requires options to start with the query prefix.

```javascript
import { createFilterOptions } from '@mui/material/Autocomplete';

const filterOptions = createFilterOptions({
  matchFrom: 'start',
  stringify: (option) => option.title,
});

<Autocomplete filterOptions={filterOptions} />;
```

--------------------------------

### Configure Theming with ThemeProvider

Source: https://v5.mui.com/material-ui/integrations/nextjs

In `pages/_app.tsx`, create a new theme using `createTheme` and pass it to the `ThemeProvider` component. This example also demonstrates setting up Google Fonts.

```typescript
 import * as React from 'react';
 import Head from 'next/head';
 import { AppProps } from 'next/app';
 import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { Roboto } from 'next/font/google';

+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});

+const theme = createTheme({
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
+});

 export default function MyApp(props: AppProps) {
  const { Component, pageProps } = props;
  return (
    <AppCacheProvider {...props}>
      <Head>...</Head>
+     <ThemeProvider theme={theme}>
        <Component {...pageProps} />
+     </ThemeProvider>
    </AppCacheProvider>
  );
 }


```

--------------------------------

### Basic FormControl Composition

Source: https://v5.mui.com/material-ui/api/form-control

A common composition example demonstrating how FormControl provides context for its children, including InputLabel, Input, and FormHelperText. This setup ensures consistent state management for form elements.

```jsx
<FormControl>
  <InputLabel htmlFor="my-input">Email address</InputLabel>
  <Input id="my-input" aria-describedby="my-helper-text" />
  <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>
```

--------------------------------

### Basic Tabs Example

Source: https://v5.mui.com/material-ui/react-tabs

Demonstrates the fundamental implementation of tabs using the `<Tab />` and `<Tabs />` components. Use this for standard tabbed interfaces.

```jsx
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
  <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
    <Tab label="Item One" {...a11yProps(0)} />
    <Tab label="Item Two" {...a11yProps(1)} />
    <Tab label="Item Three" {...a11yProps(2)} />
  </Tabs>
</Box>
<CustomTabPanel value={value} index={0}>
  Item One
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
  Item Two
</CustomTabPanel>
<CustomTabPanel value={value} index={2}>
  Item Three
</CustomTabPanel>  

```

--------------------------------

### Install Material UI v5 Icons packages

Source: https://v5.mui.com/material-ui/migration/migration-v4

Install the new @mui/icons-material package for v5 if you were using @material-ui/icons.

```bash
npm install @mui/icons-material@^5.0.0
```

--------------------------------

### Default Theme Creation (Light)

Source: https://v5.mui.com/material-ui/experimental-api/css-theme-variables/overview

Demonstrates the default approach to creating a light theme using createTheme.

```javascript
import { createTheme } from '@mui/material/styles';

const lightTheme = createTheme();
```

--------------------------------

### Install Material UI Next.js Dependencies

Source: https://v5.mui.com/material-ui/integrations/nextjs

Install the necessary Material UI and Emotion packages for Next.js integration.

```bash
npm install @mui/material-nextjs@^5.0.0 @emotion/cache
```

--------------------------------

### Basic Modal Example

Source: https://v5.mui.com/material-ui/react-modal

This snippet demonstrates how to open and display a basic modal with a title and description. Ensure `open` and `onClose` states are managed.

```jsx
<Button onClick={handleOpen}>Open modal</Button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  <Box sx={style}>
    <Typography id="modal-modal-title" variant="h6" component="h2">
      Text in a modal
    </Typography>
    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    </Typography>
  </Box>
</Modal>
```

--------------------------------

### Install Emotion packages for Material UI v5

Source: https://v5.mui.com/material-ui/migration/migration-v4

Install the required Emotion packages as peer dependencies for Material UI v5.

```bash
npm install @emotion/react @emotion/styled
```

--------------------------------

### Basic Popover Example

Source: https://v5.mui.com/material-ui/react-popover

Demonstrates the fundamental usage of the Popover component with a button to trigger its display. Requires state management for open/close and anchor element.

```jsx
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
  Open Popover
</Button>
<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}>
  <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>
```

--------------------------------

### Implementing Custom Breakpoints with ThemeProvider

Source: https://v5.mui.com/material-ui/react-grid2

Demonstrates how to define and use custom breakpoints (e.g., 'mobile', 'tablet', 'laptop') within a `ThemeProvider` to control grid item responsiveness.

```jsx
import { ThemeProvider, createTheme } from '@mui/material/styles';

function Demo() {
  return (
    <ThemeProvider
      theme={createTheme({
        breakpoints: {
          values: {
            laptop: 1024,
            tablet: 640,
            mobile: 0,
            desktop: 1280,
          },
        }},
      })}>
      <Grid container spacing={{ mobile: 1, tablet: 2, laptop: 3 }}>
        {Array.from(Array(4)).map((_, index) => (
          <Grid mobile={6} tablet={4} laptop={3} key={index}>
            <div>{index + 1}</div>
          </Grid>
        ))}
      </Grid>
    </ThemeProvider>
  );
}


```

--------------------------------

### Install Material Icons Package

Source: https://v5.mui.com/material-ui/getting-started/installation

Install the @mui/icons-material package to use the prebuilt SVG Material Icons or the font Icon component.

```bash
npm install @mui/icons-material
```

--------------------------------

### Update theme.breakpoints.between() to theme.breakpoints.up()

Source: https://v5.mui.com/material-ui/migration/v5-component-changes

When using `theme.breakpoints.between(start, end)` with the intention of matching the behavior of `theme.breakpoints.up(start)`, update the usage accordingly.

```javascript
-theme.breakpoints.between('sm', 'xl') // '@media (min-width:600px)'
+theme.breakpoints.up('sm') // '@media (min-width:600px)'
```

--------------------------------

### Basic Express Server Setup for SSR

Source: https://v5.mui.com/material-ui/guides/server-rendering

Outline the structure of an Express server for handling server-side rendering requests. This includes placeholder functions for rendering the full page and handling requests.

```javascript
import express from 'express';

// We are going to fill these out in the sections to follow.
function renderFullPage(html, css) {
  /* ... */
}

function handleRender(req, res) {
  /* ... */
}

const app = express();

// This is fired every time the server-side receives a request.
app.use(handleRender);

const port = 3000;
app.listen(port);

```

--------------------------------

### Polyfilling matchMedia for Testing

Source: https://v5.mui.com/material-ui/react-use-media-query

This snippet demonstrates how to polyfill `window.matchMedia` using `css-mediaquery` for testing environments like jsdom, which do not natively support it.

```javascript
import mediaQuery from 'css-mediaquery';

function createMatchMedia(width) {
  return (query) => ({
    matches: mediaQuery.match(query, {
      width,
    }),
    addListener: () => {},
    removeListener: () => {},
  });
}

describe('MyTests', () => {
  beforeAll(() => {
    window.matchMedia = createMatchMedia(window.innerWidth);
  });
});
```

--------------------------------

### Basic Table Example

Source: https://v5.mui.com/material-ui/react-table

A fundamental example of a Material UI table without additional styling or features. Suitable for simple data presentation.

```jsx
Dessert (100g serving)| Calories| Fat (g)| Carbs (g)| Protein (g)  
---|---|---|---|---  
Frozen yoghurt| 159| 6| 24| 4  
Ice cream sandwich| 237| 9| 37| 4.3  
Eclair| 262| 16| 24| 6  
Cupcake| 305| 3.7| 67| 4.3  
Gingerbread| 356| 16| 49| 3.9  
```

--------------------------------

### Wrapping App with ThemeProvider for SSR

Source: https://v5.mui.com/material-ui/react-use-media-query

Example of wrapping the main App component with ThemeProvider to apply theme configurations, including custom SSR match media, for server-side rendering.

```javascript
<ThemeProvider theme={theme}>
  <MyComponent />
</ThemeProvider>  

```

--------------------------------

### Material UI Peer Dependencies

Source: https://v5.mui.com/material-ui/getting-started/installation

Ensure React and ReactDOM are installed as peer dependencies before installing Material UI. This specifies compatible React versions.

```json
"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
}
```

--------------------------------

### Responsive Masonry Columns

Source: https://v5.mui.com/material-ui/react-masonry

Illustrates how to configure the number of Masonry columns responsively across different screen sizes using an object for the 'columns' prop.

```jsx
<Masonry columns={{ xs: 3, sm: 4 }} spacing={2}>
  {heights.map((height, index) => (
    <Item key={index} sx={{ height }}>
      {index + 1}
    </Item>
  ))}
</Masonry>
```

--------------------------------

### Contained Button Examples

Source: https://v5.mui.com/material-ui/react-button

Illustrates contained buttons, which are high-emphasis actions. Includes examples for primary actions, disabled states, links, and removing elevation.

```jsx
<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
  Link
</Button>
```

--------------------------------

### Install Material UI Next.js Dependencies for Pages Router

Source: https://v5.mui.com/material-ui/integrations/nextjs

Install the necessary Material UI, Emotion, and Emotion server packages for Pages Router integration.

```bash
npm install @mui/material-nextjs@^5.0.0 @emotion/cache @emotion/server
```

--------------------------------

### Nested Modal Example

Source: https://v5.mui.com/material-ui/react-modal

This example shows how to nest modals, such as a child modal within a parent dialog. Stacking more than two modals or any two with a backdrop is discouraged.

```jsx
<Button onClick={handleOpen}>Open modal</Button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="parent-modal-title"
  aria-describedby="parent-modal-description"
>
  <Box sx={{ ...style, width: 400 }}>
    <h2 id="parent-modal-title">Text in a modal</h2>
    <p id="parent-modal-description">
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    </p>
    <ChildModal />
  </Box>
</Modal>
```

--------------------------------

### CSS Grid Layout Example

Source: https://v5.mui.com/material-ui/react-grid

Demonstrates using MUI System with CSS Grid to create a 12-column layout. Useful for complex page structures.

```jsx
<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
  <Box gridColumn="span 8">
    <Item>xs=8</Item>
  </Box>
  <Box gridColumn="span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="span 8">
    <Item>xs=8</Item>
  </Box>
</Box>  

```

--------------------------------

### Migrate LocalizationProvider

Source: https://v5.mui.com/material-ui/migration/pickers-migration

Replace MuiPickersUtilsProvider with LocalizationProvider from '@mui/lab' and use the new dateAdapter prop. Manual date-io adapter installation is no longer required.

```javascript
import AdapterDateFns from '@date-io/date-fns';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
```

```javascript
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';


function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      ...
    </LocalizationProvider>
  )
);
```

--------------------------------

### Importing CSS File for Chip Styling

Source: https://v5.mui.com/material-ui/migration/migration-v4

Example of importing a CSS file to style a Chip component's delete icon.

```jsx
import './style.css';
import Chip from '@mui/material/Chip';

const ChipWithGreenIcon = () => (
  <Chip
    classes={{ deleteIcon: 'green' }}
    label="delete icon is green"
    onDelete={() => {}}
  />
);
```

--------------------------------

### Outlined Button Examples

Source: https://v5.mui.com/material-ui/react-button

Presents outlined buttons, which offer medium emphasis. Examples cover primary actions, disabled states, and links. Use them as alternatives to contained or text buttons.

```jsx
<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" href="#outlined-buttons">
  Link
</Button>
```

--------------------------------

### Autocomplete Combo Box Example

Source: https://v5.mui.com/material-ui/react-autocomplete

A basic example of the Autocomplete component used as a combo box, where the user must select from a predefined list of options. It uses the `disablePortal` prop and a `TextField` for input.

```jsx
<Autocomplete
  disablePortal
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>  

```

--------------------------------

### Portal with Ref Object Container

Source: https://v5.mui.com/material-ui/getting-started/faq

Demonstrates a naive Portal implementation using a ref object for the container. This might lead to re-renders or missed updates if the ref.current is not immediately available.

```javascript
function App() {
  const container = React.useRef(null);

  return (
    <div className="App">
      <Portal container={container}>
        <span>portaled children</span>
      </Portal>
      <div ref={container} />
    </div>
  );
}
```

```javascript
function Portal({ children, container }) {
  const [node, setNode] = React.useState(null);

  React.useEffect(() => {
    setNode(container.current);
  }, [container]);

  if (node === null) {
    return null;
  }
  return ReactDOM.createPortal(children, node);
}
```

--------------------------------

### Update theme.breakpoints.between() usage

Source: https://v5.mui.com/material-ui/migration/v5-component-changes

The `between(start, end)` breakpoint utility now defines a media query for values between start (inclusive) and end (exclusive). Update the end breakpoint by one step up to match previous behavior.

```javascript
-theme.breakpoints.between('sm', 'md') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, md + 1) => [0, lg)
+theme.breakpoints.between('sm', 'lg') // '@media (min-width:600px) and (max-width:1279.95px)' - [0, lg)
```

--------------------------------

### Autocomplete Creatable Free Solo Example

Source: https://v5.mui.com/material-ui/react-autocomplete

Demonstrates a creatable free solo Autocomplete, useful for combo box-like experiences. It includes props like `selectOnFocus`, `clearOnBlur`, and `handleHomeEndKeys` for enhanced usability when adding new options.

```jsx
Free solo with text demo

```

--------------------------------

### Apply styles between two breakpoints using `between`

Source: https://v5.mui.com/material-ui/customization/breakpoints

Use `theme.breakpoints.between(start, end)` to apply styles for screen sizes within a specific range, defined by a start and end breakpoint. This is ideal for styles that should apply only to a continuous range of screen sizes.

```javascript
const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [sm, md)
    //       [600px, 900px)
    [theme.breakpoints.between('sm', 'md')]: {
      backgroundColor: 'red',
    },
  },
});
```

--------------------------------

### Typography Theme Keys Example

Source: https://v5.mui.com/material-ui/react-typography

Illustrates how to render text that looks like a button using a generic Div component, potentially leveraging theme keys for styling.

```jsx
<Div>{"This div's text looks like that of a button."}</Div>
```

--------------------------------

### Box with sx Prop for Theming

Source: https://v5.mui.com/material-ui/react-box

Shows how to customize the Box component using the `sx` prop, including accessing theme colors and applying hover effects. This example utilizes a `ThemeProvider` to define a custom color palette.

```javascript
import * as React from 'react';
import { Box, ThemeProvider } from '@mui/material';

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0066CC',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}
```