Material UI

https://v5.mui.com/material-ui
Admin
Material UI is an open-source React component library that implements Google's Material Design,...
Tokens:446,862
Snippets:4,193
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install babel-plugin-import

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

Install the Babel plugin required for the configuration step.

```bash
yarn add -D babel-plugin-import
```

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

### Install @material-ui/styles with npm or yarn

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

Run either npm install or yarn add to install the latest version of @material-ui/styles.

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

or

yarn add @material-ui/styles

```

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

### Install @material-ui/core with npm or yarn

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

Run either npm install or yarn add to install the latest version of @material-ui/core.

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

or

yarn add @material-ui/core

```

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

### Install Material UI v5 packages

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

Install the core Material UI v5 packages and the styles package.

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

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

### Install v0.x and v1.x Material UI packages with yarn or npm

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

Install v0.x and v1.x Material UI packages side by side using yarn or npm. The two commands in each block install both versions, and the blocks are alternatives for different package managers.

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

```
```

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

```
```

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

### Install @mui/lab package

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

Install the lab package for Material UI v5.

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

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

### Install Material UI with styled-components

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

Installs Material UI with styled-components instead of the default Emotion engine. After installation, configure your bundler to support @mui/styled-engine-sc. Note that styled-components is not compatible with server-rendered projects; Emotion is recommended for SSR.

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

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

### Install Material UI v5 with Emotion

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

Installs Material UI v5 with Emotion as the styling engine. Replace @^5.0.0 with the desired version or omit it to use the latest. Requires react and react-dom to be installed as peer dependencies.

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

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

### Install stylis-plugin-rtl with npm

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

Install the required packages for RTL style plugin using npm.

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

```

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

### Responsive spacing and columns example

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

Switch prop values based on the active breakpoint. This example implements a responsive layout grid with `spacing` and `columns` that change across breakpoints, rendering six items.

```jsx
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid item xs={2} sm={4} md={4} key={index}>
      <Item>xs=2</Item>
    </Grid>
  ))}
</Grid>  

```

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

### Install @mui/lab with npm

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

Install the lab package and its peer dependency on Material UI components. The lab has a peer dependency on the core components.

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

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

### Install tss-react with npm

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

Install tss-react as a dependency using npm. This API is similar to JSS makeStyles but uses @emotion/react under the hood.

```bash
npm install tss-react

```

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

### Vite or SPA setup for modular CSS layers

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

Shows the `theme.tsx` and `main.tsx` files for a Vite or SPA setup. The `main.tsx` uses `StyledEngineProvider` with `enableCssLayer`.

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

const theme = createTheme({
  modularCssLayers: true,
});

export default function AppTheme({ children }: { children: ReactNode }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

```

```tsx
import AppTheme from './theme';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <StyledEngineProvider enableCssLayer>
      <AppTheme>{/* Your app */}</AppTheme>
    </StyledEngineProvider>
  </React.StrictMode>,
);

```

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

### Install Material UI with npm

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

Install the Material UI core library along with Emotion for styling. This command sets up the required dependencies for using Material UI components.

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

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

### Install @mui/icons-material with npm

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

Install the Material UI icons package and save it to your package.json dependencies. Requires a peer dependency on @mui/material.

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

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

### Install Material Icons

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

Installs the Material Icons package, required for the font Icon component and prebuilt SVG Material Icons used in demos.

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

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

### theme.breakpoints.up('md') example

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

Matches screen widths greater than or equal to the given breakpoint key (inclusive). In this example, the background color changes to red at the 'md' breakpoint (900px) and above.

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

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

### DataGrid Example with Pagination and Checkbox Selection

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

A DataGrid component configured with pagination (5 rows per page), page size options, and checkbox selection. This example is shown in both JavaScript and TypeScript versions.

```JavaScript
<DataGrid
  rows={rows}
  columns={columns}
  initialState={{
    pagination: {
      paginationModel: { page: 0, pageSize: 5 },
    },
  }}
  pageSizeOptions={[5, 10]}
  checkboxSelection
/>
```

```TypeScript
<DataGrid rows={rows} columns={columns} initialState={{ pagination: { paginationModel: { page: 0, pageSize: 5 }, }, }} pageSizeOptions={[5, 10]} checkboxSelection />
```

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

### Theme setup that should not run link-underline-hover codemod

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

Example theme configuration with underline: 'always' as default; do not run the link-underline-hover codemod if you have this setup.

```js
// 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',
      },
    },
  },
});

```

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

### Comprehensive transformation with $ syntax, parameters, and classes prop

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

Comprehensive example showing migration of code using $ syntax, useStyles() parameters, merging classes from a classes prop, and an explicit stylesheet name. Note that for JavaScript, remove the type parameters.

```diff
-import clsx from 'clsx';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';

-const useStyles = makeStyles((theme) => createStyles<
-  'root' | 'small' | 'child', {color: 'primary' | 'secondary', padding: number}
->
-({
-  root: ({color, padding}) => ({
+const useStyles = makeStyles<{color: 'primary' | 'secondary', padding: number}, 'child' | 'small'>({name: 'App'})((theme, { color, padding }, classes) => ({
+  root: {
     padding: padding,
-    '&:hover $child': {
+    [`&:hover .${classes.child}`]: {
       backgroundColor: theme.palette[color].main,
     }
-  }),
+  },
   small: {},
   child: {
     border: '1px solid black',
     height: 50,
-    '&$small': {
+    [`&.${classes.small}`]: {
       height: 30
     }
   }
-}), {name: 'App'});
+}));

 function App({classes: classesProp}: {classes?: any}) {
-  const classes = useStyles({color: 'primary', padding: 30, classes: classesProp});
+  const { classes, cx } = useStyles({
+    color: 'primary',
+    padding: 30
+  }, {
+    props: {
+      classes: classesProp
+    }
+  });

   return (
     <div className={classes.root}>
       <div className={classes.child}>
         The Background take the primary theme color when the mouse hovers the parent.
       </div>
-      <div className={clsx(classes.child, classes.small)}>
+      <div className={cx(classes.child, classes.small)}>
         The Background take the primary theme color when the mouse hovers the parent.
         I am smaller than the other child.
       </div>
     </div>
   );
 }

 export default App;

```

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

### Theme setup that should not run variant-prop codemod

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

Example theme configuration with variant: 'outlined' as default; do not run the variant-prop codemod if you have this setup.

```js
// ❌ 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',
      },
    },
  },
});

```

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

### Manual migration using multiple styled components

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

Example showing how to create multiple styled components in a file instead of increasing CSS specificity.

```jsx
-import makeStyles from '@mui/styles/makeStyles';
+import { styled } from '@mui/material/styles';

-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    borderRadius: 20,
-    background: theme.palette.grey[50],
-  },
-  label: {
-    color: theme.palette.primary.main,
-  }
-}))
+const Root = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: 20,
+  background: theme.palette.grey[50],
+}))

+const Label = styled('span')(({ theme }) => ({
+  color: theme.palette.primary.main,
+}))

 function Status({ label }) {
-  const classes = useStyles();
   return (
-    <div className={classes.root}>
-      {icon}
-      <span className={classes.label}>{label}</span>
-    </div>
+    <Root>
+      {icon}
+      <Label>{label}</Label>
+    </Root>
   )
 }

```

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

### Table Pagination with TablePagination Component

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

Table pagination example. Use TablePagination for large tabular data. Note that its page prop starts at 0, unlike Pagination which starts at 1.

```jsx
<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>  
```

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

### Manual migration using sx API

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

Manual migration example showing how to replace makeStyles with the sx API. Recommended for responsive styles or minor CSS overrides.

```jsx
 import Chip from '@mui/material/Chip';
-import makeStyles from '@mui/styles/makeStyles';
+import Box from '@mui/material/Box';

-const useStyles = makeStyles((theme) => ({
-  wrapper: {
-    display: 'flex',
-  },
-  chip: {
-    padding: theme.spacing(1, 1.5),
-    boxShadow: theme.shadows[1],
-  }
-}));

 function App() {
-  const classes = useStyles();
   return (
-    <div className={classes.wrapper}>
-      <Chip className={classes.chip} label="Chip" />
-    </div>
+    <Box sx={{ display: 'flex' }}>
+      <Chip label="Chip" sx={{ py: 1, px: 1.5, boxShadow: 1 }} />
+    </Box>
   );
 }

```

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

### theme.breakpoints.only('md') example

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

Matches screen widths starting from the given breakpoint key (inclusive) up to the next breakpoint key (exclusive). In this example, the background color changes to red only for the 'md' breakpoint range (900px to 1200px).

```javascript
const styles = (theme) => ({
  root: {
    backgroundColor: 'blue',
    // Match [md, md + 1)
    //       [md, lg)
    //       [900px, 1200px)
    [theme.breakpoints.only('md')]: {
      backgroundColor: 'red',
    },
  },
});
```

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

### theme.breakpoints.between('sm', 'md') example

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

Matches screen widths greater than or equal to the start breakpoint (inclusive) and less than the end breakpoint (exclusive). In this example, the background color changes to red for the range from 'sm' (600px) to 'md' (900px).

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

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

### Server-side rendering with useMediaQuery and css-mediaquery

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

Use this example to implement server-side rendering for useMediaQuery. It parses the user agent to estimate the device type, then creates a matchMedia implementation with css-mediaquery. The estimated CSS width is '0px' for mobile devices and '1024px' otherwise.

```javascript
import * as ReactDOMServer from 'react-dom/server';
import parser from 'ua-parser-js';
import mediaQuery from 'css-mediaquery';
import { createTheme, ThemeProvider } from '@mui/material/styles';

function handleRender(req, res) {
  const deviceType = parser(req.headers['user-agent']).device.type || 'desktop';
  const ssrMatchMedia = (query) => ({
    matches: mediaQuery.match(query, {
      // The estimated CSS width of the browser.
      width: deviceType === 'mobile' ? '0px' : '1024px',
    }),
  });

  const theme = createTheme({});
  const html = ReactDOMServer.renderToString(
    <ThemeProvider theme={theme}>
      <MyApp />
    </ThemeProvider>,
  );

  return res.send(`<!DOCTYPE html>
    <html>...${html}...</html>`);
};

export async function getServerSideProps() {}
// The server-side code above is not part of the client-side bundle, so you can use any imports freely.
// The code below is executed on the client side, so you need to use the `useMediaQuery` hook with the `defaultMatches` option.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the first render on the server-side.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook with the `defaultMatches` option to provide a default value for the server-side rendering.
// The `useMediaQuery` hook is not supported on the server by default. You can use the `useMediaQuery` hook
```

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

### Buttons with icons and label

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

Use startIcon and endIcon props to add icons to buttons. This example shows a Delete button with a start icon and a Send button with an end icon.

```jsx
<Button variant="outlined" startIcon={<DeleteIcon />}>
  Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
  Send
</Button>
```

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

### Create theme with experimental_extendTheme

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

Shows how to use `experimental_extendTheme` to create a theme and pass it to `Experimental_CssVarsProvider`. This replaces the default `createTheme` with `ThemeProvider` approach; `extendTheme()` returns a theme for `CssVarsProvider`.

```jsx
import {
  Experimental_CssVarsProvider as CssVarsProvider,
  experimental_extendTheme as extendTheme,
} from '@mui/material/styles';

const theme = extendTheme();
// ...custom theme

function App() {
  return <CssVarsProvider theme={theme}>...</CssVarsProvider>;
}

```

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

### Update theme.breakpoints.between() end key for v5 breakpoint behavior

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

For between(start, end), the end breakpoint should be updated by one step up. Example: between('sm', 'md') becomes between('sm', 'lg').

```js
-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)
```

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

### Access custom theme variables with theme.vars

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

Use the custom token values via the `theme.vars` object inside a styled component. This example gets the `border.subtle` and `gradient` tokens added in the theme.

```jsx
const Divider = styled('hr')(({ theme }) => ({
  height: 1,
  border: '1px solid',
  borderColor: theme.vars.palette.border.subtle,
  backgroundColor: theme.vars.palette.gradient,
}));
```

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

### Set up ThemeProvider with createMuiTheme and makeStyles

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

Shows the root of an application with ThemeProvider and a makeStyles hook. Note that useStyles should not be called before ThemeProvider; move it inside a component wrapped with ThemeProvider.

```javascript
import { ThemeProvider, createMuiTheme, makeStyles } from '@material-ui/core/styles';

const theme = createMuiTheme();

const useStyles = makeStyles((theme) => {
  root: {
    // some CSS that accesses the theme
  }
});

function App() {
  const classes = useStyles(); // ❌ If you have this, consider moving it
  // inside of a component wrapped with <ThemeProvider />
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
```

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

### Install Material UI Next.js dependencies with npm

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

Installs @mui/material-nextjs and @emotion/cache for use with the Next.js App Router. Requires @mui/material and next to already be installed.

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

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

### Transformation with $ syntax and clsx

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

Example transformation for code using the $ syntax and clsx. Shows how the codemod updates makeStyles, class references, and replaces clsx with cx.

```diff
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { makeStyles } from 'tss-react/mui';

-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles<void, 'child' | 'small'>()((theme, _params, classes) => ({
   parent: {
     padding: 30,
-    '&:hover $child': {
+    [`&:hover .${classes.child}`]: {
       backgroundColor: 'red',
     },
   },
   small: {},
   child: {
     backgroundColor: 'blue',
     height: 50,
-    '&$small': {
+    [`&.${classes.small}`]: {
       backgroundColor: 'lightblue',
       height: 30
     }
   },
 }));

 function App() {
-  const classes = useStyles();
+  const { classes, cx } = useStyles();
   return (
     <div className={classes.parent}>
       <div className={classes.child}>
         Background turns red when the mouse hovers over the parent.
       </div>
-      <div className={clsx(classes.child, classes.small)}>
+      <div className={cx(classes.child, classes.small)}>
         Background turns red when the mouse hovers over the parent.
         I am smaller than the other child.
       </div>
     </div>
   );
 }

 export default App;

```

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

### theme.transitions.create() usage example

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

Shows how to call theme.transitions.create() with a list of CSS properties to generate a transition value.

```javascript
theme.transitions.create(['background-color', 'transform']);
```

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

### Install Material UI Next.js dependencies with npm

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

Installs the Material UI Next.js integration packages and Emotion dependencies. Requires @mui/material and next to already be installed.

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

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

### Tooltip transitions: Grow, Fade, and Zoom

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

Shows three Tooltip examples using different transition components: default Grow, Fade with a 600ms timeout, and Zoom.

```jsx
<Tooltip title="Add">
  <Button>Grow</Button>
</Tooltip>
<Tooltip
  TransitionComponent={Fade}
  TransitionProps={{ timeout: 600 }}
  title="Add"
>
  <Button>Fade</Button>
</Tooltip>
<Tooltip TransitionComponent={Zoom} title="Add">
  <Button>Zoom</Button>
</Tooltip>  
```

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

### Customization table example (JS/TS)

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

An example of customizing the component. Learn more in the overrides documentation page.

```JavaScript
// JS code for customization example
```

```TypeScript
// TS code for customization example
```

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

### Import Grow

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

Shows how to import the Grow component from the @mui/material package.

```APIDOC
## Import

```js
import Grow from '@mui/material/Grow';
// or
import { Grow } from '@mui/material';
```
```

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

### Referentially stable value with useMemo

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

Shows a bad and good example for controlling the value prop. The bad example creates a new array every render, while the good example memoizes it with useMemo to keep the reference stable.

```jsx
// ⚠️ BAD
return <Autocomplete multiple value={allValues.filter((v) => v.selected)} />;

// 👍 GOOD
const selectedValues = React.useMemo(
  () => allValues.filter((v) => v.selected),
  [allValues],
);
return <Autocomplete multiple value={selectedValues} />;
```

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

### Install Roboto font via npm

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

Install the @fontsource/roboto package to add the Roboto font to your project.

```bash
npm install @fontsource/roboto
```

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

### Custom close icon example with SpeedDialIcon openIcon

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

Custom close icon example. Provide an alternate icon for the closed and open states using the `icon` and `openIcon` props of the `SpeedDialIcon` component. In this example, `EditIcon` is used as the open icon.

```jsx
<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon openIcon={<EditIcon />} />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>
```

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

### useRadioGroup example editor view

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

A one-line equivalent of the useRadioGroup example shown above, provided in the code editor view.

```jsx
<RadioGroup name="use-radio-group" defaultValue="first"> <MyFormControlLabel value="first" label="First" control={<Radio />} /> <MyFormControlLabel value="second" label="Second" control={<Radio />} /> </RadioGroup>
```

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

### Basic media query with useMediaQuery

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

Provides a media query string as the first argument to the useMediaQuery hook. The example renders a span that displays whether the '(min-width:600px)' query matches.

```tsx
import * as React from 'react';
import useMediaQuery from '@mui/material/useMediaQuery';

export default function SimpleMediaQuery() {
  const matches = useMediaQuery('(min-width:600px)');

  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
}  
```

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

### Dense table example (JS/TS)

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

A simple dense table example with no frills. The code is available in JavaScript and TypeScript versions.

```JavaScript
// JS code for dense table example
```

```TypeScript
// TS code for dense table example
```

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

### Import AccordionSummary

Source: https://v5.mui.com/material-ui/api/accordion-summary

Shows how to import the AccordionSummary component from @mui/material.

```APIDOC
## Import

```js
import AccordionSummary from '@mui/material/AccordionSummary';
// or
import { AccordionSummary } from '@mui/material';
```
```

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

### Import TimelineConnector

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

Shows how to import the TimelineConnector component from @mui/lab.

```APIDOC
## Import

```js
import TimelineConnector from '@mui/lab/TimelineConnector';
// or
import { TimelineConnector } from '@mui/lab';
```
```

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

### Install tss-react with yarn

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

Install tss-react as a dependency using yarn. This API is similar to JSS makeStyles but uses @emotion/react under the hood.

```bash
yarn add tss-react

```

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

### Update withTheme import and add ThemeProvider

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

Updates `withTheme` import to `@mui/styles/withTheme` and adds a `ThemeProvider` with a created theme, as the `defaultTheme` is no longer available. Recommended for use with `@mui/material`.

```diff
-import { withTheme } from '@mui/material/styles';
+import { withTheme } from '@mui/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';

+const theme = createTheme();
  const MyComponent = withTheme(({ theme }) => <div>{theme.direction}</div>);

  function App(props) {
-  return <MyComponent />;
+  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
  }

```

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

### Options structure examples

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

Example arrays of options using the default structures: an array of objects with label and id, or an array of strings.

```js
const options = [
  { label: 'The Godfather', id: 1 },
  { label: 'Pulp Fiction', id: 2 },
];
// or
const options = ['The Godfather', 'Pulp Fiction'];
```
Tokens:
Raw