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;