Skip to content

[Drawer] Remove deprecated CSS classes #48077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siriwatknp merged 2 commits into from
Mar 24, 2026
Merged

[Drawer] Remove deprecated CSS classes #48077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ba4458
[Drawer] Remove deprecated CSS classes
siriwatknp Mar 24, 2026
de30d44
fix ci
siriwatknp Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -998,6 +998,33 @@ The following deprecated props have been removed from the `Drawer` component:
/>
```

#### Drawer deprecated classes removed

Use the [drawer-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#drawer-classes) below to migrate the code as described in the following section:

```bash
npx @mui/codemod@latest deprecations/drawer-classes <path>
```

The following deprecated classes have been removed:

- `paperAnchorLeft` — combine `.MuiDrawer-anchorLeft` and `.MuiDrawer-paper` instead
- `paperAnchorRight` — combine `.MuiDrawer-anchorRight` and `.MuiDrawer-paper` instead
- `paperAnchorTop` — combine `.MuiDrawer-anchorTop` and `.MuiDrawer-paper` instead
- `paperAnchorBottom` — combine `.MuiDrawer-anchorBottom` and `.MuiDrawer-paper` instead
- `paperAnchorDockedLeft` — combine `.MuiDrawer-anchorLeft`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead
- `paperAnchorDockedRight` — combine `.MuiDrawer-anchorRight`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead
- `paperAnchorDockedTop` — combine `.MuiDrawer-anchorTop`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead
- `paperAnchorDockedBottom` — combine `.MuiDrawer-anchorBottom`, `.MuiDrawer-docked`, and `.MuiDrawer-paper` instead

```diff
-.MuiDrawer-paperAnchorLeft
+.MuiDrawer-anchorLeft > .MuiDrawer-paper

-.MuiDrawer-paperAnchorDockedLeft
+.MuiDrawer-anchorLeft.MuiDrawer-docked > .MuiDrawer-paper
```

#### Divider deprecated props removed

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections:
Expand Down
56 changes: 0 additions & 56 deletions docs/pages/material-ui/api/drawer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,62 +123,6 @@
"className": "MuiDrawer-modal",
"description": "Styles applied to the Modal component.",
"isGlobal": false
},
{
"key": "paperAnchorBottom",
"className": "MuiDrawer-paperAnchorBottom",
"description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedBottom",
"className": "MuiDrawer-paperAnchorDockedBottom",
"description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedLeft",
"className": "MuiDrawer-paperAnchorDockedLeft",
"description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedRight",
"className": "MuiDrawer-paperAnchorDockedRight",
"description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedTop",
"className": "MuiDrawer-paperAnchorDockedTop",
"description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorLeft",
"className": "MuiDrawer-paperAnchorLeft",
"description": "Styles applied to the Paper component if `anchor=\"left\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorRight",
"className": "MuiDrawer-paperAnchorRight",
"description": "Styles applied to the Paper component if `anchor=\"right\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorTop",
"className": "MuiDrawer-paperAnchorTop",
"description": "Styles applied to the Paper component if `anchor=\"top\"`.",
"isGlobal": false,
"isDeprecated": true
}
],
"spread": true,
Expand Down
56 changes: 0 additions & 56 deletions docs/pages/material-ui/api/swipeable-drawer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,62 +109,6 @@
"description": "Styles applied to the Paper component.",
"isGlobal": false
},
{
"key": "paperAnchorBottom",
"className": "MuiDrawer-paperAnchorBottom",
"description": "Styles applied to the Paper component if `anchor=\"bottom\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedBottom",
"className": "MuiDrawer-paperAnchorDockedBottom",
"description": "Styles applied to the Paper component if `anchor=\"bottom\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedLeft",
"className": "MuiDrawer-paperAnchorDockedLeft",
"description": "Styles applied to the Paper component if `anchor=\"left\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedRight",
"className": "MuiDrawer-paperAnchorDockedRight",
"description": "Styles applied to the Paper component if `anchor=\"right\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorDockedTop",
"className": "MuiDrawer-paperAnchorDockedTop",
"description": "Styles applied to the Paper component if `anchor=\"top\"` and `variant` is not \"temporary\".",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorLeft",
"className": "MuiDrawer-paperAnchorLeft",
"description": "Styles applied to the Paper component if `anchor=\"left\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorRight",
"className": "MuiDrawer-paperAnchorRight",
"description": "Styles applied to the Paper component if `anchor=\"right\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "paperAnchorTop",
"className": "MuiDrawer-paperAnchorTop",
"description": "Styles applied to the Paper component if `anchor=\"top\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "root",
"className": "MuiDrawer-root",
Expand Down
53 changes: 1 addition & 52 deletions docs/translations/api-docs/drawer/drawer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,58 +51,7 @@
"nodeName": "the root element",
"conditions": "<code>anchor=\"top\"</code>"
},
"modal": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the Modal component"
},
"paperAnchorBottom": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"bottom\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedBottom": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedRight": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedTop": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"left\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorRight": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"right\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorTop": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"top\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
}
"modal": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Modal component" }
},
"slotDescriptions": {
"backdrop": "The component used for the Modal backdrop.",
Expand Down
48 changes: 0 additions & 48 deletions docs/translations/api-docs/swipeable-drawer/swipeable-drawer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,54 +76,6 @@
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the Paper component"
},
"paperAnchorBottom": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"bottom\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedBottom": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"bottom\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom\">.MuiDrawer-anchorBottom</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"left\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedRight": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"right\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorDockedTop": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"top\"</code> and <code>variant</code> is not &quot;temporary&quot;",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a>, <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-docked\">.MuiDrawer-docked</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"left\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft\">.MuiDrawer-anchorLeft</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorRight": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"right\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight\">.MuiDrawer-anchorRight</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"paperAnchorTop": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the Paper component",
"conditions": "<code>anchor=\"top\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop\">.MuiDrawer-anchorTop</a> and <a href=\"/material-ui/api/drawer/#Drawer-css-MuiDrawer-paper\">.MuiDrawer-paper</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"root": { "description": "Styles applied to the root element." }
},
"slotDescriptions": { "swipeArea": "The component used for the swipeArea slot." }
Expand Down
15 changes: 2 additions & 13 deletions packages/mui-material/src/Drawer/Drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,7 @@ const useUtilityClasses = (ownerState) => {
root: ['root', `anchor${capitalize(anchor)}`],
docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
modal: ['modal'],
paper: [
'paper',
`paperAnchor${capitalize(anchor)}`,
variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`,
],
paper: ['paper'],
};

return composeClasses(slots, getDrawerUtilityClass, classes);
Expand Down Expand Up @@ -68,14 +64,7 @@ const DrawerPaper = styled(Paper, {
name: 'MuiDrawer',
slot: 'Paper',
overridesResolver: (props, styles) => {
const { ownerState } = props;

return [
styles.paper,
styles[`paperAnchor${capitalize(ownerState.anchor)}`],
ownerState.variant !== 'temporary' &&
styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`],
];
return [styles.paper];
},
})(
memoTheme(({ theme }) => ({
Expand Down
Loading
Loading