Material UI

https://v6.mui.com/material-ui/
Admin
Material UI is an open-source React component library that implements Google's Material Design,...
Tokens:466,117
Snippets:4,609
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install dependencies for Material UI with Next.js

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

Run this command to install @mui/material-nextjs and @emotion/cache. Requires @mui/material and next to be already installed.

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

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

### createTheme with palette example

Source: https://v6.mui.com/material-ui/customization/theming

Creates a theme with a custom palette using primary and secondary colors from @mui/material/colors. This is a basic example of defining theme options.

```javascript
import { createTheme } from '@mui/material/styles';
import { green, purple } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});

```

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

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

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

Install the icons package along with @mui/material and Emotion packages. Use the @^6.0.0 suffix to pin to version 6; remove it to get the latest version.

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

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

### Install Vite plugin for Pigment CSS

Source: https://v6.mui.com/material-ui/migration/migrating-to-pigment-css

Install the Vite plugin as a dev dependency.

```bash
npm install --save-dev @pigment-css/vite-plugin
```

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

### Install Pigment CSS packages

Source: https://v6.mui.com/material-ui/experimental-api/pigment-css

Install the Pigment CSS runtime and the Next.js plugin as a dev dependency.

```bash
npm install @pigment-css/react
npm install --save-dev @pigment-css/nextjs-plugin
```

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

### Install Next.js plugin for Pigment CSS

Source: https://v6.mui.com/material-ui/migration/migrating-to-pigment-css

Install the Next.js plugin as a dev dependency.

```bash
npm install --save-dev @pigment-css/nextjs-plugin
```

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

### Start development server

Source: https://v6.mui.com/material-ui/migration/migrating-to-pigment-css

Run npm run dev to start the development server after configuring the theme. Then open the browser to the localhost URL to see the app running with Pigment CSS.

```bash
npm run dev

```

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

### Install Material UI with styled-components

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

Use this command to install Material UI with styled-components instead of Emotion. Then follow the styled-components how-to guide to configure your bundler. Note that styled-components is not compatible with server-rendered projects as of late 2021.

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

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

### Manual migration example: multiple styled components

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

Example showing how to create multiple styled components in a file instead of increasing CSS specificity. This approach avoids the specificity increase of the codemod.

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

```

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

### Basic media query with useMediaQuery

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

Use useMediaQuery with a CSS media query string to get a boolean indicating whether the query matches. The example checks '(min-width:600px)' and renders the result. Note: using the 'print' query is not supported; use the sx prop's displayPrint field instead.

```JavaScript
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>;
}  
```

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

### Interactive Grid settings example

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

Shows a Grid container with direction, justifyContent, and alignItems props set to demonstrate interactive settings. The values shown are examples; the interactive demo allows changing them.

```jsx
<Grid
  container
  direction="row"
  sx={{
    justifyContent: "center",
    alignItems: "center",
  }}
>

```

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

### Toolpad useDialogs API Example

Source: https://v6.mui.com/material-ui/react-dialog

Demonstrates using the useDialogs() API from @toolpad/core to handle prompts, confirms, alerts, and custom dialogs. The example shows a delete workflow with error handling.

```JavaScript
const handleDelete = async () => {
  const id = await dialogs.prompt('Enter the ID to delete', {
    okText: 'Delete',
    cancelText: 'Cancel',
  });

  if (id) {
    const deleteConfirmed = await dialogs.confirm(
      `Are you sure you want to delete "${id}"?`,
    );
    if (deleteConfirmed) {
      try {
        setIsDeleting(true);
        await mockApiDelete(id);
        dialogs.alert('Deleted!');
      } catch (error) {
        const message = error instanceof Error ? error.message : 'Unknown error';
        await dialogs.open(MyCustomDialog, { id, error: message });
      } finally {
        setIsDeleting(false);
      }
    }
  }
};
```

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

### Manual migration example: JSS to sx API

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

Manual migration example showing how to replace makeStyles with the sx prop on a Box component. 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>
   );
 }

```

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

### Nested Modal Example (Inline)

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

Same nested modal example but formatted as a single line, likely for compact display.

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

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

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

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

Matches screen widths greater than or equal to the given breakpoint (inclusive). In this example, the background becomes red for widths >= 900px (md).

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

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

### Install tss-react with npm

Source: https://v6.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

```

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

### Install @mui/lab with npm

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

Install the lab package and Material UI core using npm. The lab has a peer dependency on Material UI components. Remove the @^6.0.0-beta suffix to use the latest version.

```bash
npm install @mui/lab@^6.0.0-beta @mui/material@^6.0.0
```

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

### Install Material UI with npm

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

Run this command to add Material UI v6 and Emotion packages to your project. Remove the @^6.0.0 suffix to install the latest version.

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

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

### Install Material UI Pigment CSS wrapper package

Source: https://v6.mui.com/material-ui/migration/migrating-to-pigment-css

Install the Material UI wrapper package for Pigment CSS along with the core Pigment CSS React package.

```bash
npm install @mui/material-pigment-css @pigment-css/react
```

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

### Experimental API: TabContext, TabList, and TabPanel example

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

Example using the experimental API from @mui/lab to create accessible tabs. The TabContext wraps TabList and TabPanel components, with TabList handling focus and keyboard navigation.

```jsx
<TabContext value={value}>
  <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
    <TabList onChange={handleChange} aria-label="lab API tabs example">
      <Tab label="Item One" value="1" />
      <Tab label="Item Two" value="2" />
      <Tab label="Item Three" value="3" />
    </TabList>
  </Box>
  <TabPanel value="1">Item One</TabPanel>
  <TabPanel value="2">Item Two</TabPanel>
  <TabPanel value="3">Item Three</TabPanel>
</TabContext>  
```

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

### Basic Material UI app with Button component

Source: https://v6.mui.com/material-ui/getting-started/learn

A minimal React app that renders a Material UI Button with the variant 'contained'. Change the variant to 'outlined' to see the style change. This is the first component example for getting started.

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

export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}  
```

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

### TablePagination Component Usage

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

Table pagination example using TablePagination component. The page prop starts at 0 to match zero-based JavaScript arrays, unlike the Pagination component which starts at 1.

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

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

### Before: MuiPickersUtilsProvider with date-io adapter

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

Before migration, you needed to install date-io adapters manually and use MuiPickersUtilsProvider.

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

```

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

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

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

Matches screen widths between two breakpoints (inclusive of start, exclusive of end). In this example, the background becomes red for widths from 600px to 900px (sm to md).

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

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

### Import PigmentGrid

Source: https://v6.mui.com/material-ui/api/pigment-grid

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

```APIDOC
## Import

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

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

### useScrollTrigger example: HideOnScroll component

Source: https://v6.mui.com/material-ui/react-app-bar

Example from the useScrollTrigger documentation. It uses the hook to get a trigger boolean and passes it to a Slide component to hide content on scroll. The hook accepts options like disableHysteresis, target, and threshold.

```jsx
import useScrollTrigger from '@mui/material/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <div>Hello</div>
    </Slide>
  );
}

```

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

### Comprehensive transformation with parameters and classes prop

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

Comprehensive example using the `$` syntax, `useStyles()` parameters, merging in classes from a `classes` prop, and an explicit name for the stylesheet. Note: when using JavaScript, remove `<void, 'child' | 'small'>`.

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

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

### Import a color from @mui/material/colors

Source: https://v6.mui.com/material-ui/customization/color

Import a color object by hue and access a specific shade with bracket notation. The example uses red[500] to get the hex value #f44336.

```javascript
import { red } from '@mui/material/colors';

const color = red[500];

```

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

### Custom Storage Manager Implementation

Source: https://v6.mui.com/material-ui/customization/dark-mode

Shows how to create a custom storage manager and pass it to the ThemeProvider via the storageManager prop. The implementation must include get, set, and subscribe methods, and if using InitColorSchemeScript, include localStorage implementation.

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

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

function storageManager(params): StorageManager {
  return {
    get: (defaultValue) => {
      // Your implementation
    },
    set: (value) => {
      // Your implementation
    },
    subscribe: (handler) => {
      // Your implementation
      return () => {
        // cleanup
      };
    },
  };
}

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

```

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

### Buttons with icons and label (Delete, Send)

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

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

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

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

### Create React App import

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

Import the initializer in /src/index.js 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 />);
```

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

### Fast-track project creation with curl

Source: https://v6.mui.com/material-ui/experimental-api/pigment-css

Use this command to quickly create a Pigment CSS project with Next.js and TypeScript. It downloads and extracts the example project from the pigment-css repository.

```bash
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2  pigment-css-master/examples/pigment-css-nextjs-ts
cd pigment-css-nextjs-ts
```

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

### Install dependencies for Material UI Next.js integration

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

Run this npm command to install the required packages for using Material UI with the Next.js Pages Router. Ensure @mui/material and next are already installed.

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

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

### FormControl Usage Example

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

A basic composition example using FormControl with InputLabel, Input, and FormHelperText.

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

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

### Theme composition with createTheme

Source: https://v6.mui.com/material-ui/customization/theming

Shows how to compose a theme in steps: first define basic palette options, then use them to define other options. The second createTheme call merges the new options into the existing theme.

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

let theme = createTheme({
  palette: {
    primary: {
      main: '#0052cc',
    },
    secondary: {
      main: '#edf2ff',
    },
  },
});

theme = createTheme(theme, {
  palette: {
    info: {
      main: theme.palette.secondary.main,
    },
  },
});

```

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

### Context menu example

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

Example of a context menu that opens on right-click. Available in JavaScript and TypeScript (JSTS).

```JavaScript/TypeScript
JSTS
Show code
```

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

### useMediaQuery with theme.breakpoints.up('sm')

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

Uses useMediaQuery with the theme's breakpoint helper. Requires a theme provider. Outputs 'theme.breakpoints.up('sm') matches: true'.

```JavaScript
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}

```

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

### Install stylis-plugin-rtl with npm

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

Install the stylis-plugin-rtl package using npm. This is required for the RTL style plugin configuration.

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

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

### Basic Tabs Example (TS)

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

TypeScript implementation of the same basic tabs example, with the same structure and props as the JavaScript version.

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

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

### NativeSelect Usage Example

Source: https://v6.mui.com/material-ui/react-select

Example of using the NativeSelect component with a FormControl and InputLabel to create a native select dropdown.

```APIDOC
## NativeSelect Component

### Description
Demonstrates how to use the NativeSelect component within a FormControl, including setting a default value and input props.

### Component
NativeSelect

### Props
- **defaultValue** (number) - Optional - The default selected value.
- **inputProps** (object) - Optional - Attributes applied to the underlying input element, such as `name` and `id`.

### Example Code
```jsx
<FormControl fullWidth>
  <InputLabel variant="standard" htmlFor="uncontrolled-native">
    Age
  </InputLabel>
  <NativeSelect
    defaultValue={30}
    inputProps={{
      name: 'age',
      id: 'uncontrolled-native',
    }}
  >
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
</FormControl>
```
```

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

### Import InputAdornment

Source: https://v6.mui.com/material-ui/api/input-adornment

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

```APIDOC
## Import

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

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

### Install Material Icons

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

Install the Material Icons package to use the font Icon component or prebuilt SVG icons.

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

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

### Install tss-react with yarn

Source: https://v6.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

```

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

### Import Menu

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

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

```APIDOC
## Import Menu

### Description
Import the Menu component from the Material UI library.

### Code
```js
import Menu from '@mui/material/Menu';
// or
import { Menu } from '@mui/material';
```
```

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

### Variable width content Grid example

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

Shows how to use xs="auto" to size a column based on its content's natural width, while other columns use fixed or flexible sizes.

```jsx
<Grid container spacing={3}>
  <Grid item xs="auto">
    <Item>variable width content</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>  

```

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

### Install Roboto font with Fontsource

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

Install the Roboto font package via npm to use Material UI's default font.

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

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

### Import Switch

Source: https://v6.mui.com/material-ui/api/switch

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

```APIDOC
## Import

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

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

### Import Grid

Source: https://v6.mui.com/material-ui/api/grid

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

```APIDOC
## Import

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

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

### Custom Separator Examples

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

Three Breadcrumbs examples using different separators: string '›', string '-', and an SVG icon (NavigateNextIcon).

```jsx
<Breadcrumbs separator="›" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs separator="-" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs
  separator={<NavigateNextIcon fontSize="small" />}
  aria-label="breadcrumb"
>
  {breadcrumbs}
</Breadcrumbs>  
```

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

### useRadioGroup example with RadioGroup

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

Example usage of the useRadioGroup hook with a RadioGroup and custom form control labels. The RadioGroup has name 'use-radio-group' and defaultValue 'first'.

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

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

### Import PigmentGrid

Source: https://v6.mui.com/material-ui/api/pigment-grid

Import the PigmentGrid component from '@mui/material/PigmentGrid' or from the main '@mui/material' package. The guide on minimizing bundle size explains the difference between the two import paths.

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

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

### Import ListItemIcon

Source: https://v6.mui.com/material-ui/api/list-item-icon

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

```APIDOC
## Import

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

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

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

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

Matches screen widths less than the given breakpoint (exclusive). In this example, the background becomes red for widths < 900px (md).

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