Skip to content

Commit

Permalink
[material-ui][docs] Audit and copyedit the v6 migration doc (#43073)
Browse files Browse the repository at this point in the history
  • Loading branch information
samuelsycamore authored Aug 16, 2024
1 parent cee8714 commit 1758f62
Show file tree
Hide file tree
Showing 11 changed files with 220 additions and 177 deletions.
2 changes: 1 addition & 1 deletion docs/data/material/components/grid/grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ The `Grid` component shouldn't be confused with a data grid; it is closer to a l
:::

:::warning
The `Grid` component has been deprecated. Please use the [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 migration guide](/material-ui/migration/migrating-to-v6/).
The `Grid` component has been deprecated. Please use [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 upgrade guide](/material-ui/migration/upgrade-to-v6/).
:::

## How it works
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,51 @@ The composed CSS classes are going to be deprecated and eventually removed in fa
For example, the `.MuiAccordionSummary-contentGutters` class was deprecated in favor of the `.MuiAccordionSummary-gutters` and `.MuiAccordionSummary-content` classes.
This improves the developer experience by reducing bloat and cognitive load.

### System props

MUI System props (such as `mt={*}`, `bgcolor={*}`, and more) have been deprecated in the Box, Typography, Link, Grid, and Stack components.
Use the codemod below to move all System props to the `sx` prop:

```bash
npx @mui/codemod@next v6.0.0/system-props <path/to/folder>
```

You can also manually update your components as shown in the snippet below:

```diff
-<Button mr={2}>
+<Button sx={{ mr: 2 }}>
```

### Theme component variants

Custom component variants defined in the theme are now merged with the theme style overrides, defined within the `root` slot of the component.

Use this codemod to update your project's theme file:

```bash
npx @mui/codemod@next v6.0.0/theme-v6 <path/to/theme>
```

You can also manually update your theme as shown in the snippet below:

```diff
createTheme({
components: {
MuiButton: {
- variants: [ ... ],
+ styleOverrides: {
+ root: {
+ variants: [ ... ],
+ },
+ },
},
},
});
```

This reduces the API surface and lets you define variants in other slots of the component.

## AccordionSummary

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#accordion-summary-classes) below to migrate the code as described in the following sections:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is
```

Alongside the stabilization, the API has been improved.
You can see the changes and further details on how to migrate in the [Material UI v6 migration guide](/material-ui/migration/migrating-to-v6/).
You can see the changes and further details on how to migrate in the [Material UI v6 upgrade guide](/material-ui/migration/upgrade-to-v6/).

Finally, the original Grid component is deprecated and will be removed in the future, so we highly encourage you to migrate to Grid v2.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<p class="description">This guide helps you integrate Pigment CSS with Material UI v6.</p>

Before going through this guide, make sure you have [migrated to Material UI v6](/material-ui/migration/migrating-to-v6/).
Before going through this guide, make sure you have [upgraded to Material UI v6](/material-ui/migration/upgrade-to-v6/).

## Introduction

Expand Down
Loading

0 comments on commit 1758f62

Please sign in to comment.