docs: Migrate portal demo to emotion

mui · Mar 25, 2021 · d886032 · d886032
1 parent 4d78b49
commit d886032
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 28 deletions.
diff --git a/docs/src/pages/components/portal/SimplePortal.js b/docs/src/pages/components/portal/SimplePortal.js
@@ -1,17 +1,8 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Portal from '@material-ui/core/Portal';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-  alert: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1, 0),
-    border: '1px solid',
-  },
-}));
 
 export default function SimplePortal() {
-  const classes = useStyles();
   const [show, setShow] = React.useState(false);
   const container = React.useRef(null);
 
@@ -24,15 +15,15 @@ export default function SimplePortal() {
       <button type="button" onClick={handleClick}>
         {show ? 'Unmount children' : 'Mount children'}
       </button>
-      <div className={classes.alert}>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
         It looks like I will render here.
         {show ? (
           <Portal container={container.current}>
             <span>But I actually render here!</span>
           </Portal>
         ) : null}
-      </div>
-      <div className={classes.alert} ref={container} />
+      </Box>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/portal/SimplePortal.tsx b/docs/src/pages/components/portal/SimplePortal.tsx
@@ -1,19 +1,8 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Portal from '@material-ui/core/Portal';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    alert: {
-      padding: theme.spacing(1),
-      margin: theme.spacing(1, 0),
-      border: '1px solid',
-    },
-  }),
-);
 
 export default function SimplePortal() {
-  const classes = useStyles();
   const [show, setShow] = React.useState(false);
   const container = React.useRef(null);
 
@@ -26,15 +15,15 @@ export default function SimplePortal() {
       <button type="button" onClick={handleClick}>
         {show ? 'Unmount children' : 'Mount children'}
       </button>
-      <div className={classes.alert}>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
         It looks like I will render here.
         {show ? (
           <Portal container={container.current}>
             <span>But I actually render here!</span>
           </Portal>
         ) : null}
-      </div>
-      <div className={classes.alert} ref={container} />
+      </Box>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
     </div>
   );
 }