[examples] Update examples to use StyledEngineProvider (#24489)

mui · Jan 28, 2021 · 3e2b632 · 3e2b632
1 parent 2f10b4d
commit 3e2b632
Show file tree

Hide file tree

Showing 23 changed files with 176 additions and 210 deletions.
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -320,6 +320,7 @@ function AppWrapper(props) {
       </NextHead>
       <ReduxProvider store={redux}>
         <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
+          {/* TODO v5: remove once migration to emotion is completed */}
           <StyledEngineProvider injectFirst>
             <StylesProvider jss={jss}>
               <ThemeProvider>

diff --git a/examples/cdn/index.html b/examples/cdn/index.html
@@ -22,11 +22,11 @@
   ThemeProvider,
   Typography,
   Container,
-  makeStyles,
   createMuiTheme,
   Box,
   SvgIcon,
   Link,
+  StyledEngineProvider,
 } = MaterialUI;
 
 // Create a theme instance.
@@ -55,21 +55,10 @@
   );
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    margin: theme.spacing(6, 0, 3),
-  },
-  lightBulb: {
-    verticalAlign: 'middle',
-    marginRight: theme.spacing(1),
-  },
-}));
-
 function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="textSecondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'top' }} />
       Pro tip: See more{' '}
       <Link href="https://material-ui.com/getting-started/templates/">
         templates
@@ -107,11 +96,14 @@
 }
 
 ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-    <CssBaseline />
-    <App />
-  </ThemeProvider>,
+  // TODO v5: remove once migration to emotion is completed
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={theme}>
+      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </StyledEngineProvider>,
   document.querySelector('#root'),
 );
     </script>

diff --git a/examples/create-react-app-with-styled-components/src/App.js b/examples/create-react-app-with-styled-components/src/App.js
@@ -1,15 +1,32 @@
 import * as React from 'react';
-import Slider from '@material-ui/core/Slider';
+import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import Link from '@material-ui/core/Link';
+import ProTip from './ProTip';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://material-ui.com/">
+        Your Website
+      </Link>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}
 
 export default function App() {
   return (
-    <div>
-      <Typography>Styled slider powered by styled-components</Typography>
-      <Slider defaultValue={30} color="primary" />
-      <Slider defaultValue={30} color="secondary" />
-      <Slider defaultValue={30} disabled />
-      <Slider defaultValue={30} valueLabelDisplay="auto" step={10} marks min={10} max={110} />
-    </div>
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Create React App v5-alpha example with TypeScript
+        </Typography>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
   );
 }
diff --git a/examples/create-react-app-with-styled-components/src/ProTip.js b/examples/create-react-app-with-styled-components/src/ProTip.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Link from '@material-ui/core/Link';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import Typography from '@material-ui/core/Typography';
+
+function LightBulbIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  );
+}
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3 }} color="textSecondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+      Pro tip: See more{' '}
+      <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
+      Material-UI documentation.
+    </Typography>
+  );
+}
diff --git a/examples/create-react-app-with-styled-components/src/index.js b/examples/create-react-app-with-styled-components/src/index.js
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <React.StrictMode>
+  // TODO v5: remove once migration to emotion is completed
+  <StyledEngineProvider injectFirst>
+    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+    <CssBaseline />
     <App />
-  </React.StrictMode>,
+  </StyledEngineProvider>,
   document.getElementById('root'),
 );
 

diff --git a/examples/create-react-app-with-typescript/src/App.tsx b/examples/create-react-app-with-typescript/src/App.tsx
@@ -22,7 +22,7 @@ export default function App() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" gutterBottom>
-          Create React App v4-beta example with TypeScript
+          Create React App v5-alpha example with TypeScript
         </Typography>
         <ProTip />
         <Copyright />

diff --git a/examples/create-react-app-with-typescript/src/ProTip.tsx b/examples/create-react-app-with-typescript/src/ProTip.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
 import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
 import Typography from '@material-ui/core/Typography';
@@ -12,23 +11,10 @@ function LightBulbIcon(props: SvgIconProps) {
   );
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      margin: theme.spacing(6, 0, 3),
-    },
-    lightBulb: {
-      verticalAlign: 'middle',
-      marginRight: theme.spacing(1),
-    },
-  }),
-);
-
 export default function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="textSecondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       Pro tip: See more{' '}
       <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
       Material-UI documentation.

diff --git a/examples/create-react-app-with-typescript/src/index.tsx b/examples/create-react-app-with-typescript/src/index.tsx
@@ -1,15 +1,19 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import { ThemeProvider } from '@material-ui/core/styles';
 import App from './App';
 import theme from './theme';
 
 ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-    <CssBaseline />
-    <App />
-  </ThemeProvider>,
+  // TODO v5: remove once migration to emotion is completed
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={theme}>
+      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </StyledEngineProvider>,
   document.querySelector('#root'),
 );
diff --git a/examples/create-react-app/src/ProTip.js b/examples/create-react-app/src/ProTip.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import Typography from '@material-ui/core/Typography';
@@ -12,21 +11,10 @@ function LightBulbIcon(props) {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    margin: theme.spacing(6, 0, 3),
-  },
-  lightBulb: {
-    verticalAlign: 'middle',
-    marginRight: theme.spacing(1),
-  },
-}));
-
 export default function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="textSecondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       Pro tip: See more{' '}
       <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
       Material-UI documentation.

diff --git a/examples/create-react-app/src/index.js b/examples/create-react-app/src/index.js
@@ -1,15 +1,19 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
 import App from './App';
 import theme from './theme';
 
 ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-    <CssBaseline />
-    <App />
-  </ThemeProvider>,
+  // TODO v5: remove once migration to emotion is completed
+  <StyledEngineProvider injectFirst>
+    <ThemeProvider theme={theme}>
+      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </StyledEngineProvider>,
   document.querySelector('#root'),
 );
diff --git a/examples/gatsby-theme/src/components/ProTip.js b/examples/gatsby-theme/src/components/ProTip.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import Typography from '@material-ui/core/Typography';
 import { Link } from 'gatsby-theme-material-ui';
@@ -12,21 +11,10 @@ function LightBulbIcon(props) {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    margin: theme.spacing(6, 0, 3),
-  },
-  lightBulb: {
-    verticalAlign: 'middle',
-    marginRight: theme.spacing(1),
-  },
-}));
-
 export default function ProTip() {
-  const classes = useStyles();
   return (
-    <Typography className={classes.root} color="textSecondary">
-      <LightBulbIcon className={classes.lightBulb} />
+    <Typography sx={{ mt: 6, mb: 3 }} color="textSecondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       Pro tip: See more{' '}
       <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
       Material-UI documentation.

diff --git a/examples/gatsby-theme/src/pages/about.js b/examples/gatsby-theme/src/pages/about.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
@@ -8,15 +9,17 @@ import Copyright from '../components/Copyright';
 
 export default function About() {
   return (
-    <Container maxWidth="sm">
-      <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          Gatsby v5-alpha example
-        </Typography>
-        <Link to="/">Go to the main page</Link>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
+    <StyledEngineProvider injectFirst>
+      <Container maxWidth="sm">
+        <Box sx={{ my: 4 }}>
+          <Typography variant="h4" component="h1" gutterBottom>
+            Gatsby v5-alpha example
+          </Typography>
+          <Link to="/">Go to the main page</Link>
+          <ProTip />
+          <Copyright />
+        </Box>
+      </Container>
+    </StyledEngineProvider>
   );
 }
diff --git a/examples/gatsby-theme/src/pages/index.js b/examples/gatsby-theme/src/pages/index.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
@@ -8,17 +9,20 @@ import Copyright from '../components/Copyright';
 
 export default function Index() {
   return (
-    <Container maxWidth="sm">
-      <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          Gatsby v5-alpha example
-        </Typography>
-        <Link to="/about" color="secondary">
-          Go to the about page
-        </Link>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
+    // TODO v5: remove once migration to emotion is completed
+    <StyledEngineProvider injectFirst>
+      <Container maxWidth="sm">
+        <Box sx={{ my: 4 }}>
+          <Typography variant="h4" component="h1" gutterBottom>
+            Gatsby v5-alpha example
+          </Typography>
+          <Link to="/about" color="secondary">
+            Go to the about page
+          </Link>
+          <ProTip />
+          <Copyright />
+        </Box>
+      </Container>
+    </StyledEngineProvider>
   );
 }