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

[mnajdova]

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>;
   }

---

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

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

[mnajdova]

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

[mnajdova]

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

[eps1lon]

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

[mnajdova]

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