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;