diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 903eb619001eac..8a74845a47060f 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -164,3 +164,55 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an + sx={{ opacity : "0.6" }} /> ``` + +## PaginationItem + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/pagination-item-classes +``` + +### Composed CSS classes + +The CSS classes that composed the `variant` and `color` prop values were removed. + +Here's how to migrate: + +```diff +-.MuiPaginationItem-textPrimary ++.MuiPaginationItem-text.MuiPaginationItem-colorPrimary +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-colorSecondary +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary +``` + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${paginationItemClasses.textPrimary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedPrimary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.textSecondary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedSecondary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }, + }, + }, +``` diff --git a/docs/translations/api-docs/pagination-item/pagination-item.json b/docs/translations/api-docs/pagination-item/pagination-item.json index 4184e90ba4d8e1..de26e46725f5d8 100644 --- a/docs/translations/api-docs/pagination-item/pagination-item.json +++ b/docs/translations/api-docs/pagination-item/pagination-item.json @@ -66,13 +66,13 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead. How to migrate." }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead. How to migrate." }, "page": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -114,13 +114,13 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead. How to migrate." }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead. How to migrate." } } } diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 5951cf346d63c2..83ac6f13e1dcc2 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -191,6 +191,71 @@ npx @mui/codemod@latest deprecations/alert-props npx @mui/codemod@latest deprecations/divider-props ``` +#### `pagination-item-classes` + +JS transforms: + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`&.${paginationItemClasses.textPrimary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.textSecondary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedPrimary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${paginationItemClasses.outlinedSecondary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, +- '&.MuiPaginationItem-textPrimary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary': { + color: 'red', + }, +- '&.MuiPaginationItem-textSecondary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary': { + color: 'red', + }, +- '&.MuiPaginationItem-outlinedPrimary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary': { + color: 'red', + }, +- '&.MuiPaginationItem-outlinedSecondary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary': { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiPaginationItem-textPrimary ++.MuiPaginationItem-text.MuiPaginationItem-primary +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-secondary +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-primary +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-secondary + /> +``` + +```bash +npx @mui/codemod@latest deprecations/pagination-item-classes +``` + ### v5.0.0 #### `base-use-named-exports` diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index 2ea28ab2ed544a..c004445f169f0d 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -2,6 +2,7 @@ import transformAccordionProps from '../accordion-props'; import transformAvatarProps from '../avatar-props'; import transformDividerProps from '../divider-props'; import transformAccordionClasses from '../accordion-summary-classes'; +import transformPaginationItemClasses from '../pagination-item-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -12,6 +13,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformAvatarProps(file, api, options); file.source = transformDividerProps(file, api, options); file.source = transformAccordionClasses(file, api, options); + file.source = transformPaginationItemClasses(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index ee2e3316deba79..bcf170eacbfb8d 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -1,7 +1,10 @@ const { plugin: accordionSummaryClassesPlugin, } = require('../accordion-summary-classes/postcss-plugin'); +const { + plugin: paginationItemClassesPlugin, +} = require('../pagination-item-classes/postcss-plugin'); module.exports = { - plugins: [accordionSummaryClassesPlugin], + plugins: [accordionSummaryClassesPlugin, paginationItemClassesPlugin], }; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js new file mode 100644 index 00000000000000..9200e42765f6b8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js @@ -0,0 +1 @@ +export { default } from './pagination-item-classes'; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js new file mode 100644 index 00000000000000..5bf5e6cdd23a3f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -0,0 +1,84 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/PaginationItem$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'paginationItemClasses' + ) { + const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', ''); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiPaginationItem-', '') + .replaceAll('&.', '') + .split('.') + .filter(Boolean); + + if (precedingTemplateElement.value.raw.endsWith('&.')) { + parent.expressions.splice( + memberExpressionIndex, + 1, + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[0]), + ), + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClasses[1]), + ), + ); + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^&${deprecatedClass}`); + + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`))); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js new file mode 100644 index 00000000000000..4949d6d844ef3a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './pagination-item-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('pagination-item-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js new file mode 100644 index 00000000000000..c07b8d28264957 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js @@ -0,0 +1,41 @@ +const classes = [ + { + deprecatedClass: '.MuiPaginationItem-textPrimary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorPrimary', + }, + { + deprecatedClass: '.MuiPaginationItem-textSecondary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorSecondary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedPrimary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedSecondary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated PaginationItem classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css new file mode 100644 index 00000000000000..2bf14ae9103fe5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css @@ -0,0 +1,15 @@ +.MuiPaginationItem-textPrimary { + color: red; +} + +.MuiPaginationItem-textSecondary { + color: blue; +} + +.MuiPaginationItem-outlinedPrimary { + border: 1px solid black; +} + +.MuiPaginationItem-outlinedSecondary { + border: 1px solid green; +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js new file mode 100644 index 00000000000000..5959ac9142b25e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js @@ -0,0 +1,111 @@ +import { paginationItemClasses } from '@mui/material/PaginationItem'; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + '&.MuiPaginationItem-textPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-textSecondary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`&.${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '&.MuiPaginationItem-textPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-textSecondary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`&.${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css new file mode 100644 index 00000000000000..2446978a1256d6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css @@ -0,0 +1,15 @@ +.MuiPaginationItem-text.MuiPaginationItem-colorPrimary { + color: red; +} + +.MuiPaginationItem-text.MuiPaginationItem-colorSecondary { + color: blue; +} + +.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary { + border: 1px solid black; +} + +.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary { + border: 1px solid green; +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js new file mode 100644 index 00000000000000..320220e105dd15 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js @@ -0,0 +1,111 @@ +import { paginationItemClasses } from '@mui/material/PaginationItem'; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { + color: 'red', + }, + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts index c1a2ed82a4f7b8..1ec0961e66114c 100644 --- a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts +++ b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts @@ -13,25 +13,21 @@ export interface PaginationItemClasses { /** Styles applied to the root element if `variant="text"`. */ text: string; /** 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. + * @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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ textPrimary: string; /** 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. + * @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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ 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"`. - * @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. + * @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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ outlinedPrimary: string; /** 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. + * @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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ outlinedSecondary: string; /** Styles applied to the root element if `rounded="true"`. */