content: import React from 'react';
  import { fade, withStyles, makeStyles, createMuiTheme } from '@material-ui/core/styles';
  import { ThemeProvider } from '@material-ui/styles';
  import InputBase from '@material-ui/core/InputBase';
  import InputLabel from '@material-ui/core/InputLabel';
  import TextField from '@material-ui/core/TextField';
  import FormControl from '@material-ui/core/FormControl';
  import { green } from '@material-ui/core/colors';
  
  const CssTextField = withStyles({
    root: {
      '& label.Mui-focused': {
        color: 'green',
      },
      '& .MuiInput-underline:after': {
        borderBottomColor: 'green',
      },
      '& .MuiOutlinedInput-root': {
        '& fieldset': {
          borderColor: 'red',
        },
        '&:hover fieldset': {
          borderColor: 'yellow',
        },
        '&.Mui-focused fieldset': {
          borderColor: 'green',
        },
      },
    },
  })(TextField);
  
  const BootstrapInput = withStyles(theme => ({
    root: {
      'label + &': {
        marginTop: theme.spacing(3),
      },
    },
    input: {
      borderRadius: 4,
      position: 'relative',
      backgroundColor: theme.palette.common.white,
      border: '1px solid #ced4da',
      fontSize: 16,
      width: 'auto',
      padding: '10px 12px',
      transition: theme.transitions.create(['border-color', 'box-shadow']),
      // Use the system font instead of the default Roboto font.
      fontFamily: [
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
      '&:focus': {
        boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
        borderColor: theme.palette.primary.main,
      },
    },
  }))(InputBase);
  
  const useStylesReddit = makeStyles(theme => ({
    root: {
      border: '1px solid #e2e2e1',
      overflow: 'hidden',
      borderRadius: 4,
      backgroundColor: '#fcfcfb',
      transition: theme.transitions.create(['border-color', 'box-shadow']),
      '&:hover': {
        backgroundColor: '#fff',
      },
      '&$focused': {
        backgroundColor: '#fff',
        boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
        borderColor: theme.palette.primary.main,
      },
    },
    focused: {},
  }));
  
  function RedditTextField(props) {
    const classes = useStylesReddit();
  
    return <TextField InputProps={{ classes, disableUnderline: true }} {...props} />;
  }
  
  const useStyles = makeStyles(theme => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    margin: {
      margin: theme.spacing(1),
    },
  }));
  
  const ValidationTextField = withStyles({
    root: {
      '& input:valid + fieldset': {
        borderColor: 'green',
        borderWidth: 2,
      },
      '& input:invalid + fieldset': {
        borderColor: 'red',
        borderWidth: 2,
      },
      '& input:valid:focus + fieldset': {
        borderLeftWidth: 6,
        padding: '4px !important', // override inline-style
      },
    },
  })(TextField);
  
  const theme = createMuiTheme({
    palette: {
      primary: green,
    },
  });
  
  export default function CustomizedInputs() {
    const classes = useStyles();
  
    return (
      <form className={classes.root} noValidate>
        <CssTextField className={classes.margin} id="custom-css-standard-input" label="Custom CSS" />
        <CssTextField
          className={classes.margin}
          label="Custom CSS"
          variant="outlined"
          id="custom-css-outlined-input"
        />
        <ThemeProvider theme={theme}>
          <TextField
            className={classes.margin}
            label="ThemeProvider"
            id="mui-theme-provider-standard-input"
          />
          <TextField
            className={classes.margin}
            label="ThemeProvider"
            variant="outlined"
            id="mui-theme-provider-outlined-input"
          />
        </ThemeProvider>
        <FormControl className={classes.margin}>
          <InputLabel shrink htmlFor="bootstrap-input">
            Bootstrap
          </InputLabel>
          <BootstrapInput defaultValue="react-bootstrap" id="bootstrap-input" />
        </FormControl>
        <RedditTextField
          label="Reddit"
          className={classes.margin}
          defaultValue="react-reddit"
          variant="filled"
          id="reddit-input"
        />
        <InputBase
          className={classes.margin}
          defaultValue="Naked input"
          inputProps={{ 'aria-label': 'naked' }}
        />
        <ValidationTextField
          className={classes.margin}
          label="CSS validation style"
          required
          variant="outlined"
          defaultValue="Success"
          id="validation-outlined-input"
        />
      </form>
    );
  }
  