1import React from 'react';
 2import TextFieldMUI from '@material-ui/core/TextField';
 3import {makeStyles} from '@material-ui/core/styles';
 4
 5const TextField = ({className, light, ...props}) => {
 6  const classes = useStyles();
 7  return (
 8    <TextFieldMUI
 9      className={`${classes.input} ${className} ${light ? 'light' : ''}`}
10      fullWidth
11      margin="dense"
12      {...props}
13    />
14  );
15};
16
17const useStyles = makeStyles(theme => ({
18  input: {
19    '&.light .MuiFormLabel-root': {
20      color: 'white',
21    },
22    '&.light .MuiInputBase-input': {color: 'white'},
23    '&.light .MuiInput-underline::before': {
24      borderColor: 'white',
25    },
26    '&.light .MuiInput-underline:hover:not(.Mui-disabled)::before': {
27      borderColor: 'white',
28    },
29    '&.light .MuiInput-underline::after': {
30      transform: 'scaleX(0)',
31    },
32  },
33}));
34
35export default TextField;