Skip to content

[core] Remove styled from @material-ui/styles in core#26101

Merged
mnajdova merged 7 commits intomui:nextfrom
mnajdova:feat/remove-styled-core
May 4, 2021
Merged

[core] Remove styled from @material-ui/styles in core#26101
mnajdova merged 7 commits intomui:nextfrom
mnajdova:feat/remove-styled-core

Conversation

@mnajdova
Copy link
Member

@mnajdova mnajdova commented May 3, 2021

One step toward the removal of @material-ui/styles in v6.

Breaking changes

  • The styled JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/styled instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core/styles instead.

    -import { styled } from '@material-ui/core/styles';
    +import { styled } from '@material-ui/styles';
    +import { createTheme, ThemeProvider } from '@material-ui/core/styles';
    
    +const theme = createTheme();
     const MyComponent = styled('div')(({ theme }) => ({ background: theme.palette.primary.main }));
     
     function App(props) {
    -  return <MyComponent />;
    +  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
     }

@mui-pr-bot
Copy link

mui-pr-bot commented May 3, 2021

Details of bundle changes

@material-ui/core: parsed: -0.19% 😍, gzip: -0.20% 😍
@material-ui/lab: parsed: -0.25% 😍, gzip: -0.34% 😍

Generated by 🚫 dangerJS against 9973d7e

const { className, ...other } = props;
const classes = useStyles();

return <MarkdownElement className={clsx(classes.root, className)} {...other} />;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MarkdownElement is build with JSS, we cannot override with emotion currently, so just temporary replacing styled() with makeStyles().

@mnajdova mnajdova marked this pull request as ready for review May 3, 2021 16:13
@mnajdova mnajdova requested a review from oliviertassinari May 3, 2021 16:26
return importPath.replace(stylesSrcPath, '@material-ui/styles');
}

const systemSrcPath = path.posix.join('..', 'material-ui-system', 'src');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The build was failing without this, as the system is referenced in the experimentalStyled().

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can strip these fixes in TypeScript 4.3. Their current dev build no longer requires manual rewriting.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect, I was confused why it was failing at the beginning. It's great that we can drop them 👍

@oliviertassinari oliviertassinari added breaking change Introduces changes that are not backward compatible. scope: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. labels May 3, 2021
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
@mnajdova mnajdova merged commit 82baa71 into mui:next May 4, 2021
@oliviertassinari oliviertassinari added this to the v5-beta milestone Aug 17, 2021
@oliviertassinari oliviertassinari mentioned this pull request Aug 17, 2021
42 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

breaking change Introduces changes that are not backward compatible. scope: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants