Skip to content

[chip] Remove deprecated classes #48046

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
mj12albert merged 3 commits into from
Mar 23, 2026
Merged

[chip] Remove deprecated classes #48046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b743de6
[chip] Remove deprecated classes
silviuaavram Mar 20, 2026
6909f66
lint
silviuaavram Mar 20, 2026
3006279
Merge branch 'master' into chore/remove-deprecated-props-10
mj12albert Mar 23, 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
74 changes: 74 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 @@ -759,6 +759,80 @@ If you were using these deprecated class names as `styleOverrides` keys in your
});
```

#### Chip deprecated CSS classes removed

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

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

The following deprecated `Chip` CSS classes have been removed:

- `clickableColorPrimary` → use `.MuiChip-clickable.MuiChip-colorPrimary`
- `clickableColorSecondary` → use `.MuiChip-clickable.MuiChip-colorSecondary`
- `deletableColorPrimary` → use `.MuiChip-deletable.MuiChip-colorPrimary`
- `deletableColorSecondary` → use `.MuiChip-deletable.MuiChip-colorSecondary`
- `outlinedPrimary` → use `.MuiChip-outlined.MuiChip-colorPrimary`
- `outlinedSecondary` → use `.MuiChip-outlined.MuiChip-colorSecondary`
- `filledPrimary` → use `.MuiChip-filled.MuiChip-colorPrimary`
- `filledSecondary` → use `.MuiChip-filled.MuiChip-colorSecondary`
- `avatarSmall` → use `.MuiChip-sizeSmall > .MuiChip-avatar`
- `avatarMedium` → use `.MuiChip-sizeMedium > .MuiChip-avatar`
- `avatarColorPrimary` → use `.MuiChip-colorPrimary > .MuiChip-avatar`
- `avatarColorSecondary` → use `.MuiChip-colorSecondary > .MuiChip-avatar`
- `iconSmall` → use `.MuiChip-sizeSmall > .MuiChip-icon`
- `iconMedium` → use `.MuiChip-sizeMedium > .MuiChip-icon`
- `iconColorPrimary` → use `.MuiChip-colorPrimary > .MuiChip-icon`
- `iconColorSecondary` → use `.MuiChip-colorSecondary > .MuiChip-icon`
- `labelSmall` → use `.MuiChip-sizeSmall > .MuiChip-label`
- `labelMedium` → use `.MuiChip-sizeMedium > .MuiChip-label`
- `deleteIconSmall` → use `.MuiChip-sizeSmall > .MuiChip-deleteIcon`
- `deleteIconMedium` → use `.MuiChip-sizeMedium > .MuiChip-deleteIcon`
- `deleteIconColorPrimary` → use `.MuiChip-colorPrimary > .MuiChip-deleteIcon`
- `deleteIconColorSecondary` → use `.MuiChip-colorSecondary > .MuiChip-deleteIcon`
- `deleteIconOutlinedColorPrimary` → use `.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon`
- `deleteIconOutlinedColorSecondary` → use `.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon`
- `deleteIconFilledColorPrimary` → use `.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon`
- `deleteIconFilledColorSecondary` → use `.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon`

If you were using these deprecated class names as `styleOverrides` keys in your theme, use the `variants` array in the `root` override instead.
For classes that targeted child elements (`avatar`, `icon`, `deleteIcon`), use CSS child selectors inside the `root` variants since those are not standalone styled slots.
The `label` slot is a proper styled component and can use `variants` directly in `styleOverrides.label`:

```diff
const theme = createTheme({
components: {
MuiChip: {
styleOverrides: {
- clickableColorPrimary: { boxShadow: 'none' },
- outlinedPrimary: { borderWidth: 2 },
- filledSecondary: { opacity: 0.9 },
- avatarColorPrimary: { color: 'white' },
- iconSmall: { fontSize: 14 },
- deleteIconColorPrimary: { color: 'red' },
- labelSmall: { padding: '0 6px' },
+ root: {
+ variants: [
+ { props: { clickable: true, color: 'primary' }, style: { boxShadow: 'none' } },
+ { props: { variant: 'outlined', color: 'primary' }, style: { borderWidth: 2 } },
+ { props: { variant: 'filled', color: 'secondary' }, style: { opacity: 0.9 } },
+ { props: { color: 'primary' }, style: { '& .MuiChip-avatar': { color: 'white' } } },
+ { props: { size: 'small' }, style: { '& .MuiChip-icon': { fontSize: 14 } } },
+ { props: { color: 'primary' }, style: { '& .MuiChip-deleteIcon': { color: 'red' } } },
+ ],
+ },
+ label: {
+ variants: [
+ { props: { size: 'small' }, style: { padding: '0 6px' } },
+ ],
+ },
},
},
},
});
```

#### CircularProgress deprecated CSS classes removed

Use the [circular-progress-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#circular-progress-classes) below to migrate the code as described in the following section:
Expand Down
182 changes: 0 additions & 182 deletions docs/pages/material-ui/api/chip.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,54 +74,12 @@
"description": "Styles applied to the avatar element.",
"isGlobal": false
},
{
"key": "avatarColorPrimary",
"className": "MuiChip-avatarColorPrimary",
"description": "Styles applied to the avatar element if `color=\"primary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "avatarColorSecondary",
"className": "MuiChip-avatarColorSecondary",
"description": "Styles applied to the avatar element if `color=\"secondary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "avatarMedium",
"className": "MuiChip-avatarMedium",
"description": "Styles applied to the avatar element if `size=\"medium\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "avatarSmall",
"className": "MuiChip-avatarSmall",
"description": "Styles applied to the avatar element if `size=\"small\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "clickable",
"className": "MuiChip-clickable",
"description": "Styles applied to the root element if `onClick` is defined or `clickable={true}`.",
"isGlobal": false
},
{
"key": "clickableColorPrimary",
"className": "MuiChip-clickableColorPrimary",
"description": "Styles applied to the root element if `onClick` and `color=\"primary\"` is defined or `clickable={true}`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "clickableColorSecondary",
"className": "MuiChip-clickableColorSecondary",
"description": "Styles applied to the root element if `onClick` and `color=\"secondary\"` is defined or `clickable={true}`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "colorDefault",
"className": "MuiChip-colorDefault",
Expand Down Expand Up @@ -170,82 +128,12 @@
"description": "Styles applied to the root element if `onDelete` is defined.",
"isGlobal": false
},
{
"key": "deletableColorPrimary",
"className": "MuiChip-deletableColorPrimary",
"description": "Styles applied to the root element if `onDelete` and `color=\"primary\"` is defined.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deletableColorSecondary",
"className": "MuiChip-deletableColorSecondary",
"description": "Styles applied to the root element if `onDelete` and `color=\"secondary\"` is defined.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIcon",
"className": "MuiChip-deleteIcon",
"description": "Styles applied to the deleteIcon element.",
"isGlobal": false
},
{
"key": "deleteIconColorPrimary",
"className": "MuiChip-deleteIconColorPrimary",
"description": "Styles applied to the deleteIcon element if `color=\"primary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIconColorSecondary",
"className": "MuiChip-deleteIconColorSecondary",
"description": "Styles applied to the deleteIcon element if `color=\"secondary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIconFilledColorPrimary",
"className": "MuiChip-deleteIconFilledColorPrimary",
"description": "Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"filled\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIconFilledColorSecondary",
"className": "MuiChip-deleteIconFilledColorSecondary",
"description": "Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"filled\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIconMedium",
"className": "MuiChip-deleteIconMedium",
"description": "Styles applied to the deleteIcon element if `size=\"medium\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIconOutlinedColorPrimary",
"className": "MuiChip-deleteIconOutlinedColorPrimary",
"description": "Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"outlined\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIconOutlinedColorSecondary",
"className": "MuiChip-deleteIconOutlinedColorSecondary",
"description": "Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"outlined\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "deleteIconSmall",
"className": "MuiChip-deleteIconSmall",
"description": "Styles applied to the deleteIcon element if `size=\"small\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "disabled",
"className": "Mui-disabled",
Expand All @@ -258,20 +146,6 @@
"description": "Styles applied to the root element if `variant=\"filled\"`.",
"isGlobal": false
},
{
"key": "filledPrimary",
"className": "MuiChip-filledPrimary",
"description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"primary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "filledSecondary",
"className": "MuiChip-filledSecondary",
"description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"secondary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "focusVisible",
"className": "Mui-focusVisible",
Expand All @@ -284,68 +158,12 @@
"description": "Styles applied to the icon element.",
"isGlobal": false
},
{
"key": "iconColorPrimary",
"className": "MuiChip-iconColorPrimary",
"description": "Styles applied to the icon element if `color=\"primary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "iconColorSecondary",
"className": "MuiChip-iconColorSecondary",
"description": "Styles applied to the icon element if `color=\"secondary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "iconMedium",
"className": "MuiChip-iconMedium",
"description": "Styles applied to the icon element if `size=\"medium\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "iconSmall",
"className": "MuiChip-iconSmall",
"description": "Styles applied to the icon element if `size=\"small\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "labelMedium",
"className": "MuiChip-labelMedium",
"description": "Styles applied to the label `span` element if `size=\"medium\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "labelSmall",
"className": "MuiChip-labelSmall",
"description": "Styles applied to the label `span` element if `size=\"small\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "outlined",
"className": "MuiChip-outlined",
"description": "Styles applied to the root element if `variant=\"outlined\"`.",
"isGlobal": false
},
{
"key": "outlinedPrimary",
"className": "MuiChip-outlinedPrimary",
"description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "outlinedSecondary",
"className": "MuiChip-outlinedSecondary",
"description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "sizeMedium",
"className": "MuiChip-sizeMedium",
Expand Down
Loading
Loading