Material-UI

https://v4.mui.com
Admin
Material-UI provides React components for faster and easier web development, allowing users to build...
Tokens:151,893
Snippets:2,156
Trust Score:10
Update:1 month ago
Show doc for...
Tokens:
Raw
### Basic Material-UI Application Setup

Source: https://v4.mui.com/getting-started/usage

A minimal example showing how to import a component and render it to the DOM.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

```typescript
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import Button from "@mui/material/Button";
function App() {
return <Button variant="contained">Hello World</Button>;
}
ReactDOM.createRoot(document.querySelector("#app")).render(<App />);
```

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

### Install Material-UI v0.x and v1.x

Source: https://v4.mui.com/guides/migration-v0x

Install both versions of the library to allow for incremental migration.

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

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

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

### Install jss-rtl plugin

Source: https://v4.mui.com/guides/right-to-left

Install the required JSS plugin to handle style flipping.

```bash
npm install jss-rtl
```

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

### Install @material-ui/system

Source: https://v4.mui.com/system/basics

Commands to install the package using npm or yarn.

```bash
// with npm
npm install @material-ui/system

// with yarn
yarn add @material-ui/system
```

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

### Install Data Grid package

Source: https://v4.mui.com/components/data-grid/getting-started

Install the community version of the Data Grid using npm or yarn.

```bash
// with npm
npm install @mui/x-data-grid@^4.0.0

// with yarn
yarn add @mui/x-data-grid@^4.0.0
```

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

### Apply height utilities

Source: https://v4.mui.com/system/sizing

Examples of setting height using percentage strings.

```jsx
<Box height="25%">…
<Box height="50%">…
<Box height="75%">…
<Box height="100%">…
```

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

### Install Material-UI core

Source: https://v4.mui.com/components/icons

Install the core Material-UI package if it is not already present in the project.

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

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

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

### Apply width utilities

Source: https://v4.mui.com/system/sizing

Examples of setting width using percentage strings or auto.

```jsx
<Box width="25%">…
<Box width="50%">…
<Box width="75%">…
<Box width="100%">…
<Box width="auto">…
```

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

### Install Material Icons package

Source: https://v4.mui.com/components/icons

Install the @material-ui/icons package using npm or yarn.

```bash
// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons
```

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

### Configure a custom theme

Source: https://v4.mui.com/system/basics

Setup a ThemeProvider with custom spacing and palette values for consistent styling.

```javascript
import React from 'react'
import { ThemeProvider } from 'styled-components'

const theme = {
  spacing: 4,
  palette: {
    primary: '#007bff',
  },
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* children */}
    </ThemeProvider>
  )
}
```

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

### Full DataGrid implementation

Source: https://v4.mui.com/components/data-grid/getting-started

A complete example showing how to render the DataGrid with rows and columns inside a container.

```javascript
import React from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'is Amazing' },
];

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}
```

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

### Card Media Example

Source: https://v4.mui.com/components/cards

Displaying images within a card using CardMedia.

```jsx
## Lizard
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
ShareLearn More
```

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

### Example Lerna Root package.json

Source: https://v4.mui.com/getting-started/faq

A sample package.json structure for a Lerna root folder with hoisted dependencies.

```json
{
  "name": "my-monorepo",
  "devDependencies": {
    "lerna": "latest"
  },
  "dependencies": {
    "@material-ui/styles": "^4.0.0"
  },
  "scripts": {
    "bootstrap": "lerna bootstrap",
    "clean": "lerna clean",
    "start": "lerna run start",
    "build": "lerna run build"
  }
}
```

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

### Implement Theme with Custom Palette

Source: https://v4.mui.com/customization/palette

A complete example showing how to apply a custom theme to components using ThemeProvider.

```javascript
import React from 'react';
import { createTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { purple } from '@material-ui/core/colors';
import Button from '@material-ui/core/Button';

const theme = createTheme({
  palette: {
    primary: {
      // Purple and green play nicely together.
      main: purple[500],
    },
    secondary: {
      // This is green.A700 as hex.
      main: '#11cb5f',
    },
  },
});

export default function Palette() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </ThemeProvider>
  );
}
```

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

### Install Material-UI via npm

Source: https://v4.mui.com/drafts

Use this command to install the core Material-UI package in your project.

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

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

### Use theme.breakpoints.between for media queries

Source: https://v4.mui.com/customization/breakpoints

Matches screen widths between the start and end breakpoint keys.

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

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

### Install @material-ui/styles

Source: https://v4.mui.com/styles/basics

Commands to add the styling package to your project dependencies using npm or yarn.

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

// with yarn
yarn add @material-ui/styles
```

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

### Using primary and accent colors

Source: https://v4.mui.com/customization/color

Example showing how to import multiple colors and access both standard shades and accent variants.

```javascript
import purple from '@material-ui/core/colors/purple';
import red from '@material-ui/core/colors/red';

const primary = red[500]; // #f44336
const accent = purple['A200']; // #e040fb
const accent = purple.A200; // #e040fb (alternative method)
```

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

### Install Enterprise License Key

Source: https://v4.mui.com/components/data-grid/getting-started

Configuring the license key for the DataGridPro package to remove watermarks and console warnings.

```javascript
import { LicenseInfo } from '@mui/x-data-grid-pro';

LicenseInfo.setLicenseKey(
  'x0jTPl0USVkVZV0SsMjM1kDNyADM5cjM2ETPZJVSQhVRsIDN0YTM6IVREJ1T0b9586ef25c9853decfa7709eee27a1e',
);
```

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

### Basic spacing usage

Source: https://v4.mui.com/system/spacing

Examples of applying margin and padding props to a Box component.

```javascript
<Box p={1}>…
<Box m={1}>…
<Box p={2}>…
```

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

### Converting imports with codemod

Source: https://v4.mui.com/guides/minimizing-bundle-size

Example of the import transformation performed by the top-level-imports codemod.

```javascript
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
+import { Button, TextField } from '@material-ui/core';
```

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

### Wrap component with ThemeProvider

Source: https://v4.mui.com/components/use-media-query

Example of wrapping a component with a theme provider to enable theme-aware media queries.

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

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

### Implement Custom Input Component

Source: https://v4.mui.com/components/text-fields

Example of a custom input component using useImperativeHandle to expose the focus method.

```javascript
function MyInputComponent(props) {
  const { component: Component, inputRef, ...other } = props;

  // implement `InputElement` interface
  React.useImperativeHandle(inputRef, () => ({
    focus: () => {
      // logic to focus the rendered component from 3rd party belongs here
    },
    // hiding the value e.g. react-stripe-elements
  }));

  // `Component` will be your `SomeThirdPartyComponent` from below
  return <Component {...other} />;
}

// usage
<TextField
  InputProps={{
    inputComponent: MyInputComponent,
    inputProps: { component: SomeThirdPartyComponent },
  }}
/>;
```

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

### Initialize DataGrid with Rows and Columns

Source: https://v4.mui.com/components/data-grid/getting-started

Basic setup for a DataGrid component using React, defining rows and column definitions.

```typescript
import React from "react";
import { DataGrid, RowsProp, ColDef } from "@material-ui/data-grid";
const rows: RowsProp = [
{ id: 1, col1: "Hello", col2: "World" },
{ id: 2, col1: "XGrid", col2: "is Awesome" },
{ id: 3, col1: "Material-UI", col2: "is Amazing" },
{ id: 4, col1: "Hello", col2: "World" },
{ id: 5, col1: "XGrid", col2: "is Awesome" },
{ id: 6, col1: "Material-UI", col2: "is Amazing" }
];
const columns: ColDef[] = [
{ field: "id", hide: true },
{ field: "col1", headerName: "Column 1", width: 150 },
{ field: "col2", headerName: "Column 2", width: 150 }
];
```

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

### Implement Floating Action Buttons

Source: https://v4.mui.com/components/floating-action-button

Examples of regular and extended FABs with various colors, icons, and disabled states.

```jsx
<Fab color="primary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
  <EditIcon />
</Fab>
<Fab variant="extended">
  <NavigationIcon className={classes.extendedIcon} />
  Navigate
</Fab>
<Fab disabled aria-label="like">
  <FavoriteIcon />
</Fab>
```

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

### CSS Class Customization

Source: https://v4.mui.com/guides/api

Example of defining component styles using a root object and pseudo-class selectors.

```javascript
const styles = {
  root: {
    color: green[600],
    '&$checked': {
      color: green[500],
    },
  },
  checked: {},
};
```

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

### Render components with color props

Source: https://v4.mui.com/styles/basics

Examples of passing color props to components using different API patterns.

```jsx
<React.Fragment>
  <MyButton color="red">Red</MyButton>
  <MyButton color="blue">Blue</MyButton>
</React.Fragment>
```

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

### Define palette structure for playground output

Source: https://v4.mui.com/customization/color

Example structure representing the output format from the color playground tool.

```javascript
{
  palette: {
    primary: blue,
    secondary: pink,
  },
}
```

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

### Configure Grid Container Properties

Source: https://v4.mui.com/components/grid

Example of setting flexbox properties like direction, justification, and alignment on a Grid container.

```jsx
<Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
>
```

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

### Install Material-UI peer dependencies

Source: https://v4.mui.com/components/data-grid/getting-started

Install required Material-UI dependencies if they are not already present in your project.

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

// with yarn
yarn add @material-ui/core @material-ui/styles
```

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

### Create a custom Box component

Source: https://v4.mui.com/system/basics

Shows how to initialize a component with specific style functions.

```javascript
import styled from 'styled-components';
import { spacing, palette } from '@material-ui/system';

const Box = styled.div`${spacing}${palette}`;

export default Box;
```

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

### getRowMode

Source: https://v4.mui.com/components/data-grid/editing

Gets the mode of a row.

```APIDOC
## getRowMode(id: GridRowId) -> GridRowMode

Gets the mode of a row.
```

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

### getCellMode

Source: https://v4.mui.com/components/data-grid/editing

Gets the mode of a cell.

```APIDOC
## getCellMode(id: GridRowId, field: string) -> GridCellMode

Gets the mode of a cell.
```

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

### getEditRowsModel

Source: https://v4.mui.com/components/data-grid/editing

Gets the edit rows model of the grid.

```APIDOC
## getEditRowsModel() -> GridEditRowsModel

Gets the edit rows model of the grid.
```

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

### getRowMode method signature

Source: https://v4.mui.com/components/data-grid/editing

Gets the mode of a row.

```typescript
getRowMode: (id: GridRowId) => GridRowMode
```

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

### getCellMode method signature

Source: https://v4.mui.com/components/data-grid/editing

Gets the mode of a cell.

```typescript
getCellMode: (id: GridRowId, field: string) => GridCellMode
```

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

### Implement basic Input components

Source: https://v4.mui.com/components/text-fields

Demonstrates usage of the Input component with various states including default, placeholder, disabled, and error.

```jsx
<form className={classes.root} noValidate autoComplete="off">
  <Input defaultValue="Hello world" inputProps={{ 'aria-label': 'description' }} />
  <Input placeholder="Placeholder" inputProps={{ 'aria-label': 'description' }} />
  <Input defaultValue="Disabled" disabled inputProps={{ 'aria-label': 'description' }} />
  <Input defaultValue="Error" error inputProps={{ 'aria-label': 'description' }} />
</form>
```

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

### Complex Interaction Card

Source: https://v4.mui.com/components/cards

Example of a card with expandable content.

```jsx
R
Shrimp and Chorizo PaellaSeptember 14, 2016
This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.
```

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

### getEditRowsModel method signature

Source: https://v4.mui.com/components/data-grid/editing

Gets the edit rows model of the grid.

```typescript
getEditRowsModel: () => GridEditRowsModel
```

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

### Path imports for faster startup

Source: https://v4.mui.com/guides/minimizing-bundle-size

Use path imports to avoid pulling in unused modules, which can improve development startup times.

```javascript
// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```

```javascript
import { Button, TextField } from '@material-ui/core';
```

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

### Importing makeStyles with and without default theme

Source: https://v4.mui.com/styles/basics

Demonstrates the difference between importing from the core package, which includes a default theme, and the standalone styles package.

```javascript
// Re-export with a default theme
import { makeStyles } from '@material-ui/core/styles';

// Original module with no default theme
import { makeStyles } from '@material-ui/styles';
```

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

### Import Components from v0.x and v1.x

Source: https://v4.mui.com/guides/migration-v0x

Import components from their respective packages to use them simultaneously.

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

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

### theme.breakpoints.between(start, end)

Source: https://v4.mui.com/customization/breakpoints

Generates a media query for a range between two breakpoints.

```APIDOC
## theme.breakpoints.between(start, end)

### Description
Returns a media query string that matches screen widths greater than the start breakpoint and less than the end breakpoint.

### Arguments
- **start** (String | Number) - Required - Start breakpoint key or pixel value.
- **end** (String | Number) - Required - End breakpoint key or pixel value.

### Returns
- **media query** (String) - The generated media query string.
```

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

### Implement Virtualized Autocomplete

Source: https://v4.mui.com/components/autocomplete

Use react-window to virtualize a large list of options for better performance.

```jsx
<Autocomplete
  id="virtualize-demo"
  style={{ width: 300 }}
  disableListWrap
  classes={classes}
  ListboxComponent={ListboxComponent}
  renderGroup={renderGroup}
  options={OPTIONS}
  groupBy={(option) => option[0].toUpperCase()}
  renderInput={(params) => <TextField {...params} variant="outlined" label="10,000 options" />}
  renderOption={(option) => <Typography noWrap>{option}</Typography>}
/>
```

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

### Media Control Card

Source: https://v4.mui.com/components/cards

Example of a card featuring UI controls for media playback.

```jsx
##### Live From Space
###### Mac Miller
```

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

### Updating package.json scripts for CRA

Source: https://v4.mui.com/guides/minimizing-bundle-size

Update the start script in package.json to use react-app-rewired.

```json
  "scripts": {
-  "start": "react-scripts start"
+  "start": "react-app-rewired start"
  }
```

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

### Configuring Page Size and Options

Source: https://v4.mui.com/components/data-grid/pagination

Customizes the initial page size and provides a list of selectable page size options for the user.

```jsx
<DataGrid
  pageSize={pageSize}
  onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
  rowsPerPageOptions={[5, 10, 20]}
  pagination
  {...data}
/>
```

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

### Get selected rows via apiRef

Source: https://v4.mui.com/components/data-grid/selection

Returns a Map containing the currently selected rows.

```typescript
getSelectedRows: () => Map<GridRowId, GridRowData>
```

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

### Apply sizing utilities with Box

Source: https://v4.mui.com/system/sizing

Demonstrates how different input types for width are handled, including percentages, pixels, and raw CSS strings.

```jsx
<Box width={1/4}> // Numbers in [0,1] are multiplied by 100 and converted to % values.
<Box width={300}> // Numbers are converted to pixel values.
<Box width="75%"> // String values are used as raw CSS.
<Box width={1}>   // 100%
```

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

### Catching Editing Events

Source: https://v4.mui.com/components/data-grid/editing

Example of using the DataGridPro component with an apiRef to log editing events.

```jsx
<div style={{ height: 180, width: '100%' }}>
  <DataGridPro rows={rows} columns={columns} apiRef={apiRef} />
</div>
{message && (
  <Alert severity="info" style={{ marginTop: 8 }}>
    {message}
  </Alert>
)}
```

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

### Implement a Simple Menu

Source: https://v4.mui.com/components/menus

Displays a basic menu triggered by a button click. Requires anchorEl state management to control visibility.

```jsx
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
  Open Menu
</Button>
<Menu
  id="simple-menu"
  anchorEl={anchorEl}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>
  <MenuItem onClick={handleClose}>Profile</MenuItem>
  <MenuItem onClick={handleClose}>My account</MenuItem>
  <MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
```

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

### Configure Keyboard Navigation Behavior

Source: https://v4.mui.com/components/tabs

Demonstrates the difference between automatic selection on focus and manual selection.

```jsx
/* Tabs where selection follows focus */
<Tabs selectionFollowsFocus />
/* Tabs where each tab needs to be selected manually */
<Tabs />
```

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

### Use theme-based spacing and color

Source: https://v4.mui.com/system/basics

Demonstrates using theme-aware props for spacing multipliers and primary colors.

```jsx
<Box p={1}>4px</Box>
<Box p={2}>8px</Box>
<Box p={-1}>-4px</Box>
```

```jsx
<Box color="primary">blue</Box>
```

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

### Implement a simple App Bar

Source: https://v4.mui.com/components/app-bar

Displays a basic App Bar with a menu icon, title, and login button.

```jsx
<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" className={classes.title}>
      News
    </Typography>
    <Button color="inherit">Login</Button>
  </Toolbar>
</AppBar>
```

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

### Apply style properties to Box

Source: https://v4.mui.com/system/basics

Example of passing style props directly to the created Box component.

```jsx
<Box p="1rem" color="grey">Give me some space!</Box>
```

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

### Import ExpansionPanelSummary

Source: https://v4.mui.com/api/expansion-panel-summary

Shows the available methods for importing the component from the Material UI core library.

```javascript
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
// or
import { ExpansionPanelSummary } from '@material-ui/core';
```

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

### Import sizing utility

Source: https://v4.mui.com/system/sizing

Import the sizing function from the system package.

```javascript
import { sizing } from '@material-ui/system';
```

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

### Create a custom theme

Source: https://v4.mui.com/customization/theming

Use createTheme to generate a theme object with custom palette colors.

```javascript
import { createTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

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

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

### Configure button group sizes and colors

Source: https://v4.mui.com/components/button-group

Shows how to apply different sizes and color themes to button groups.

```jsx
<ButtonGroup size="small" aria-label="small outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined secondary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="large" color="primary" aria-label="large outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
```

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

### Naive Portal implementation

Source: https://v4.mui.com/getting-started/faq

A basic implementation of a Portal component that attempts to use a ref object to determine the container node.

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

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

### Get visible row models

Source: https://v4.mui.com/components/data-grid/filtering

Retrieves a sorted Map containing only the rows that pass the current filter criteria.

```typescript
getVisibleRowModels: () => Map<GridRowId, GridRowData>
```

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

### Use theme.breakpoints.up for media queries

Source: https://v4.mui.com/customization/breakpoints

Matches screen widths greater than and including the specified breakpoint key.

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

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

### Implement dynamic dark mode with useMediaQuery

Source: https://v4.mui.com/customization/palette

Uses the prefers-color-scheme media query to automatically toggle between light and dark themes based on system settings.

```javascript
import React from 'react';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

function App() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline/>
      <Routes />
    </ThemeProvider>
  );
}
```

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

### theme.breakpoints.up(key)

Source: https://v4.mui.com/customization/breakpoints

Generates a media query for screen widths greater than and including the specified breakpoint.

```APIDOC
## theme.breakpoints.up(key)

### Description
Returns a media query string that matches screen widths greater than and including the screen size given by the breakpoint key.

### Arguments
- **key** (String | Number) - Required - A breakpoint key (e.g., 'xs', 'sm') or a pixel value.

### Returns
- **media query** (String) - The generated media query string.
```

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

### Temporary Drawer Anchors

Source: https://v4.mui.com/components/drawers

Demonstrates how to implement a temporary drawer that can be anchored to any of the four sides of the screen.

```jsx
{['left', 'right', 'top', 'bottom'].map((anchor) => (
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
    <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
      {list(anchor)}
    </Drawer>
  </React.Fragment>
))}
```

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

### Basic Material-UI Component Usage

Source: https://v4.mui.com/drafts

Example of importing and using a Button component within a React functional component.

```javascript
import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return <Button color="primary">Hello World</Button>;
}
```

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

### Customized Snackbars with Alerts

Source: https://v4.mui.com/components/snackbars

Displays a success snackbar triggered by a button, along with various severity-based alert examples.

```jsx
<Button variant="outlined" onClick={handleClick}>
  Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="success">
    This is a success message!
  </Alert>
</Snackbar>
<Alert severity="error">This is an error message!</Alert>
<Alert severity="warning">This is an warning message!</Alert>
<Alert severity="info">This is an information message!</Alert>
<Alert severity="success">This is a success message!</Alert>
```

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

### Polyfill matchMedia for testing

Source: https://v4.mui.com/components/use-media-query

Implement a matchMedia polyfill using css-mediaquery to support testing environments like jsdom.

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

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

### Changing the root element with component prop

Source: https://v4.mui.com/guides/composition

Example of rendering a List component as a nav element instead of the default ul.

```jsx
<List component="nav">
  <ListItem button>
    <ListItemText primary="Trash" />
  </ListItem>
  <ListItem button>
    <ListItemText primary="Spam" />
  </ListItem>
</List>
```

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

### Import spacing utility

Source: https://v4.mui.com/system/spacing

Import the spacing utility from the system package.

```javascript
import { spacing } from '@material-ui/system';
```

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

### createTheme(options, ...args)

Source: https://v4.mui.com/customization/theming

Generates a complete theme object based on the provided options and merges additional arguments.

```APIDOC
## createTheme(options, ...args)

### Description
Generates a theme based on the options received. It takes an incomplete theme object and adds the missing parts, then performs a deep merge with any additional arguments.

### Arguments
- **options** (Object) - Required - An incomplete theme object.
- **...args** (Array) - Optional - Additional objects to deep merge with the returned theme.

### Returns
- **theme** (Object) - A complete, ready to use theme object.
```

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

### Import palette utility

Source: https://v4.mui.com/system/palette

Import the palette utility from the @material-ui/system package.

```javascript
import { palette } from '@material-ui/system';
```

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

### Use createStyles for theme-dependent styles

Source: https://v4.mui.com/guides/typescript

Use the createStyles helper to guide type inference when styles depend on the theme or function expressions.

```typescript
// Non-dependent styles
const styles = createStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
  },
});

// Theme-dependent styles
const styles = ({ palette, spacing }: Theme) => createStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    padding: spacing.unit,
    backgroundColor: palette.background.default,
    color: palette.primary.main,
  },
});
```

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

### Configure Autocomplete with custom filter options

Source: https://v4.mui.com/components/autocomplete

Create a filter method using createFilterOptions to enforce specific matching rules, such as matching from the start of the string.

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

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

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

### Use theme.breakpoints.down for media queries

Source: https://v4.mui.com/customization/breakpoints

Matches screen widths less than and including the specified breakpoint key.

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

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

### Configuring leading edge events

Source: https://v4.mui.com/components/click-away-listener

Configures the listener to respond to leading events like mouse down and touch start instead of default trailing events.

```jsx
<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  onClickAway={handleClickAway}
>
  <div className={classes.root}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <div className={classes.dropdown}>
        Click me, I will stay visible until you click outside.
      </div>
    ) : null}
  </div>
</ClickAwayListener>
```

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

### Use theme.breakpoints.only for media queries

Source: https://v4.mui.com/customization/breakpoints

Matches screen widths including the specified breakpoint key.

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

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

### Using a ref object for Portal container

Source: https://v4.mui.com/getting-started/faq

An example of passing a ref object to the Portal component, which may fail to render if the DOM node is not yet 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>
  );
}
```

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

### Import StepContent

Source: https://v4.mui.com/api/step-content

Use these import statements to include the StepContent component in your project.

```javascript
import StepContent from '@material-ui/core/StepContent';
// or
import { StepContent } from '@material-ui/core';
```

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

### Default theme spacing usage

Source: https://v4.mui.com/customization/spacing

Demonstrates the default 8px scaling factor behavior.

```javascript
const theme = createTheme();

theme.spacing(2) // = 8 * 2
```

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

### Create enhanced mount function

Source: https://v4.mui.com/guides/testing

Initializes a mount function with context support, requiring cleanup after tests.

```javascript
import { createMount } from '@material-ui/core/test-utils';
import { ThemeProvider } from '@material-ui/core/styles';

describe('<MyComponent />', () => {
  let mount;

  function MySuccessButton({ children }) {
    return (
      <ThemeProvider theme={{ success: { main: '#fff' } }}>
        {children}
      </ThemeProvider>
    );
  }

  before(() => {
    mount = createMount();
  });

  after(() => {
    mount.cleanUp();
  });

  it('should work', () => {
    const wrapper = mount(<MockedTheme><MySuccessButton /></MockedTheme>);
  });
});
```

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

### Importing Border Utilities

Source: https://v4.mui.com/system/borders

Import the borders system utility from the @material-ui/system package.

```javascript
import { borders } from '@material-ui/system';
```

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

### Implement a simple modal

Source: https://v4.mui.com/components/modal

Use the Modal component to render content in front of a backdrop. Requires open and onClose props to manage visibility.

```jsx
<button type="button" onClick={handleOpen}>
  Open Modal
</button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="simple-modal-title"
  aria-describedby="simple-modal-description"
>
  {body}
</Modal>
```

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

### Import InputAdornment

Source: https://v4.mui.com/api/input-adornment

Methods for importing the InputAdornment component into a project.

```javascript
import InputAdornment from '@material-ui/core/InputAdornment';
// or
import { InputAdornment } from '@material-ui/core';
```

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

### Configure StylesProvider with jss-rtl

Source: https://v4.mui.com/guides/right-to-left

Create a custom JSS instance with the rtl plugin and provide it to the component tree using StylesProvider.

```javascript
import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

function RTL(props) {
  return (
    <StylesProvider jss={jss}>
      {props.children}
    </StylesProvider>
  );
}
```

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

### Create render to string function

Source: https://v4.mui.com/guides/testing

Initializes a function for rendering components to static strings.

```javascript
import { createRender } from '@material-ui/core/test-utils';

describe('<MyComponent />', () => {
  let render;

  before(() => {
    render = createRender();
  });

  it('should work', () => {
    const wrapper = render(<MyComponent />);
  });
});
```

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

### Configuring Create React App overrides

Source: https://v4.mui.com/guides/minimizing-bundle-size

Use config-overrides.js to enable .babelrc configuration in Create React App.

```javascript
/* config-overrides.js */
const { useBabelRc, override } = require('customize-cra')

module.exports = override(
  useBabelRc()
);
```
Tokens:
Raw