[docs] Migrate TextField demos to emotion

docs/src/pages/components/text-fields/BasicTextFields.js

@@ -1,24 +1,20 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-      width: '25ch',
-    },
-  },
-}));
-
 export default function BasicTextFields() {
-  const classes = useStyles();
-
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <TextField id="outlined-basic" label="Outlined" />
       <TextField id="filled-basic" label="Filled" variant="filled" />
       <TextField id="standard-basic" label="Standard" variant="standard" />
-    </form>
+    </Box>
   );
 }

docs/src/pages/components/text-fields/BasicTextFields.tsx

@@ -1,26 +1,20 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-        width: '25ch',
-      },
-    },
-  }),
-);
-
 export default function BasicTextFields() {
-  const classes = useStyles();
-
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <TextField id="outlined-basic" label="Outlined" />
       <TextField id="filled-basic" label="Filled" variant="filled" />
       <TextField id="standard-basic" label="Standard" variant="standard" />
-    </form>
+    </Box>
   );
 }

docs/src/pages/components/text-fields/ColorTextFields.js

@@ -1,21 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-      width: '25ch',
-    },
-  },
-}));
-
 export default function ColorTextFields() {
-  const classes = useStyles();
-
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <TextField
         id="outlined-secondary"
         label="Outlined secondary"
@@ -33,6 +29,6 @@ export default function ColorTextFields() {
         color="secondary"
         variant="standard"
       />
-    </form>
+    </Box>
   );
 }

docs/src/pages/components/text-fields/ColorTextFields.tsx

@@ -1,23 +1,17 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-        width: '25ch',
-      },
-    },
-  }),
-);
-
 export default function ColorTextFields() {
-  const classes = useStyles();
-
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <TextField
         id="outlined-secondary"
         label="Outlined secondary"
@@ -35,6 +29,6 @@ export default function ColorTextFields() {
         color="secondary"
         variant="standard"
       />
-    </form>
+    </Box>
   );
 }

docs/src/pages/components/text-fields/ComposedTextField.js

@@ -1,30 +1,28 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import FilledInput from '@material-ui/core/FilledInput';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
-
 export default function ComposedTextField() {
   const [name, setName] = React.useState('Composed TextField');
-  const classes = useStyles();
 
   const handleChange = (event) => {
     setName(event.target.value);
   };
 
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1 },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <FormControl>
         <InputLabel htmlFor="component-simple">Name</InputLabel>
         <Input id="component-simple" value={name} onChange={handleChange} />
@@ -69,6 +67,6 @@ export default function ComposedTextField() {
         <InputLabel htmlFor="component-filled">Name</InputLabel>
         <FilledInput id="component-filled" value={name} onChange={handleChange} />
       </FormControl>
-    </form>
+    </Box>
   );
 }

docs/src/pages/components/text-fields/ComposedTextField.tsx

@@ -1,32 +1,28 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import FilledInput from '@material-ui/core/FilledInput';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
-
 export default function ComposedTextField() {
   const [name, setName] = React.useState('Composed TextField');
-  const classes = useStyles();
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);
   };
 
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1 },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <FormControl>
         <InputLabel htmlFor="component-simple">Name</InputLabel>
         <Input id="component-simple" value={name} onChange={handleChange} />
@@ -71,6 +67,6 @@ export default function ComposedTextField() {
         <InputLabel htmlFor="component-filled">Name</InputLabel>
         <FilledInput id="component-filled" value={name} onChange={handleChange} />
       </FormControl>
-    </form>
+    </Box>
   );
 }

docs/src/pages/components/text-fields/CustomizedInputBase.js

@@ -11,7 +11,7 @@ export default function CustomizedInputBase() {
   return (
     <Paper
       component="form"
-      sx={{ padding: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}
+      sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}
     >
       <IconButton sx={{ p: '10px' }} aria-label="menu">
         <MenuIcon />

docs/src/pages/components/text-fields/CustomizedInputBase.tsx

@@ -11,7 +11,7 @@ export default function CustomizedInputBase() {
   return (
     <Paper
       component="form"
-      sx={{ padding: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}
+      sx={{ p: '2px 4px', display: 'flex', alignItems: 'center', width: 400 }}
     >
       <IconButton sx={{ p: '10px' }} aria-label="menu">
         <MenuIcon />

docs/src/pages/components/text-fields/FormPropsTextFields.js

@@ -1,21 +1,17 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& .MuiTextField-root': {
-      margin: theme.spacing(1),
-      width: '25ch',
-    },
-  },
-}));
 
 export default function FormPropsTextFields() {
-  const classes = useStyles();
-
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& .MuiTextField-root': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <div>
         <TextField
           required
@@ -167,6 +163,6 @@ export default function FormPropsTextFields() {
           variant="standard"
         />
       </div>
-    </form>
+    </Box>
   );
 }

docs/src/pages/components/text-fields/FormPropsTextFields.tsx

@@ -1,23 +1,17 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& .MuiTextField-root': {
-        margin: theme.spacing(1),
-        width: '25ch',
-      },
-    },
-  }),
-);
 
 export default function FormPropsTextFields() {
-  const classes = useStyles();
-
   return (
-    <form className={classes.root} noValidate autoComplete="off">
+    <Box
+      component="form"
+      sx={{
+        '& .MuiTextField-root': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
       <div>
         <TextField
           required
@@ -169,6 +163,6 @@ export default function FormPropsTextFields() {
           variant="standard"
         />
       </div>
-    </form>
+    </Box>
   );
 }