diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 010879665d9bbe..c95019ed6f9c94 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -287,7 +287,11 @@ function generatePropType(type: PropTypeDescriptor): string | undefined { } function generateName(reactAPI: ReactApi) { - if (reactAPI.styles.classes.length && !reactAPI.styles.name && reactAPI.name.indexOf('Unstyled') === -1) { + if ( + reactAPI.styles.classes.length && + !reactAPI.styles.name && + reactAPI.name.indexOf('Unstyled') === -1 + ) { throw new Error(`Missing styles name on ${reactAPI.name} component`); } diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 6af38d2e143dc9..2dab4bb855cd2d 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -751,44 +751,6 @@ const classes = makeStyles(theme => ({ + ``` -- The `classes` prop is no longer available for styling the component. You can fix this by one of these options: - - 1. Move these overrides to the theme's components overrides section - - ```diff - - const useStyles = makeStyles({ - - root: { - - margin: '10px', - - }, - - colorPrimary: { - - backgroundColor: '#232323', - - } - - }); - + const theme = createMuiTheme({ - + components: { - + MuiSlider: { - + styleOverrides: { - + root: { - + margin: '10px', - + }, - + colorPrimary: { - + backgroundColor: '#232323', - + }, - + }, - + }, - + }, - + }); - // ... - - const classes = useStyles(); - // ... - + - // ... - - - + - ``` - - or 2. you can follow one of the overrides approach described on the ([Style Library Interoperability](/guides/interoperability/)) page. The class names for the Slider component can be find on the [API page](/api/slider/#css). - ### Snackbar - The notification now displays at the bottom left on large screens.