diff --git a/docs/pages/material-ui/api/pagination-item.json b/docs/pages/material-ui/api/pagination-item.json
index 9ad1ff57e903b9..68f0269d48d3bb 100644
--- a/docs/pages/material-ui/api/pagination-item.json
+++ b/docs/pages/material-ui/api/pagination-item.json
@@ -65,6 +65,18 @@
"import { PaginationItem } from '@mui/material';"
],
"classes": [
+ {
+ "key": "colorPrimary",
+ "className": "MuiPaginationItem-colorPrimary",
+ "description": "Styles applied to the root element if `color=\"primary\"`.",
+ "isGlobal": false
+ },
+ {
+ "key": "colorSecondary",
+ "className": "MuiPaginationItem-colorSecondary",
+ "description": "Styles applied to the root element if `color=\"secondary\"`.",
+ "isGlobal": false
+ },
{
"key": "disabled",
"className": "Mui-disabled",
@@ -105,13 +117,15 @@
"key": "outlinedPrimary",
"className": "MuiPaginationItem-outlinedPrimary",
"description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "outlinedSecondary",
"className": "MuiPaginationItem-outlinedSecondary",
"description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "page",
@@ -165,13 +179,15 @@
"key": "textPrimary",
"className": "MuiPaginationItem-textPrimary",
"description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
},
{
"key": "textSecondary",
"className": "MuiPaginationItem-textSecondary",
"description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.",
- "isGlobal": false
+ "isGlobal": false,
+ "isDeprecated": true
}
],
"spread": true,
diff --git a/docs/translations/api-docs/pagination-item/pagination-item.json b/docs/translations/api-docs/pagination-item/pagination-item.json
index 87ef7ed5f4a339..4184e90ba4d8e1 100644
--- a/docs/translations/api-docs/pagination-item/pagination-item.json
+++ b/docs/translations/api-docs/pagination-item/pagination-item.json
@@ -26,6 +26,16 @@
"variant": { "description": "The variant to use." }
},
"classDescriptions": {
+ "colorPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"primary\"
"
+ },
+ "colorSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"secondary\"
"
+ },
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
@@ -55,12 +65,14 @@
"outlinedPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\"
and color=\"primary\"
"
+ "conditions": "variant=\"outlined\"
and color=\"primary\"
",
+ "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead."
},
"outlinedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"outlined\"
and color=\"secondary\"
"
+ "conditions": "variant=\"outlined\"
and color=\"secondary\"
",
+ "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead."
},
"page": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -101,12 +113,14 @@
"textPrimary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\"
and color=\"primary\"
"
+ "conditions": "variant=\"text\"
and color=\"primary\"
",
+ "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead."
},
"textSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
- "conditions": "variant=\"text\"
and color=\"secondary\"
"
+ "conditions": "variant=\"text\"
and color=\"secondary\"
",
+ "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead."
}
}
}
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
index 92d630f5f8b1e6..9be03580d12ca3 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -41,6 +41,7 @@ const useUtilityClasses = (ownerState) => {
`size${capitalize(size)}`,
variant,
shape,
+ color !== 'standard' && `color${capitalize(color)}`,
color !== 'standard' && `${variant}${capitalize(color)}`,
disabled && 'disabled',
selected && 'selected',
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.test.js b/packages/mui-material/src/PaginationItem/PaginationItem.test.js
index c469b912380481..8b772e8596589e 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.test.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.test.js
@@ -42,6 +42,18 @@ describe('', () => {
expect(getByRole('button')).to.have.class(classes.selected);
});
+ it('should add the `colorPrimary` class to the root element if `color="primary"`', () => {
+ const { getByRole } = render();
+
+ expect(getByRole('button')).to.have.class(classes.colorPrimary);
+ });
+
+ it('should add the `colorSecondary` class to the root element if `color="secondary"`', () => {
+ const { getByRole } = render();
+
+ expect(getByRole('button')).to.have.class(classes.colorSecondary);
+ });
+
describe('prop: disabled', () => {
it('should add the `disabled` class to the root element if `disabled={true}`', () => {
const { getByRole } = render();
diff --git a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts
index 0c9a885c24fd70..c1a2ed82a4f7b8 100644
--- a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts
+++ b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts
@@ -12,15 +12,27 @@ export interface PaginationItemClasses {
sizeLarge: string;
/** Styles applied to the root element if `variant="text"`. */
text: string;
- /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="primary"`.
+ * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+ * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+ */
textPrimary: string;
- /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+ /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
+ * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+ * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+ */
textSecondary: string;
/** Styles applied to the root element if `variant="outlined"`. */
outlined: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+ * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+ * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+ */
outlinedPrimary: string;
- /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+ /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+ * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+ * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+ */
outlinedSecondary: string;
/** Styles applied to the root element if `rounded="true"`. */
rounded: string;
@@ -38,6 +50,10 @@ export interface PaginationItemClasses {
selected: string;
/** Styles applied to the icon to display. */
icon: string;
+ /** Styles applied to the root element if `color="primary"`. */
+ colorPrimary: string;
+ /** Styles applied to the root element if `color="secondary"`. */
+ colorSecondary: string;
}
export type PaginationItemClassKey = keyof PaginationItemClasses;
@@ -65,6 +81,8 @@ const paginationItemClasses: PaginationItemClasses = generateUtilityClasses('Mui
'disabled',
'selected',
'icon',
+ 'colorPrimary',
+ 'colorSecondary',
]);
export default paginationItemClasses;