app/src/components/TextField/index.js (view raw)
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;