BugTitleInput.tsx

 1import { createStyles, fade, withStyles, TextField } from '@material-ui/core';
 2import { Theme } from '@material-ui/core/styles';
 3
 4const BugTitleInput = withStyles((theme: Theme) =>
 5  createStyles({
 6    root: {
 7      '& .MuiInputLabel-outlined': {
 8        color: theme.palette.text.primary,
 9      },
10      '& input:valid + fieldset': {
11        color: theme.palette.text.primary,
12        borderColor: theme.palette.divider,
13        borderWidth: 2,
14      },
15      '& input:valid:hover + fieldset': {
16        color: theme.palette.text.primary,
17        borderColor: fade(theme.palette.divider, 0.3),
18        borderWidth: 2,
19      },
20      '& input:valid:focus + fieldset': {
21        color: theme.palette.text.primary,
22        borderColor: theme.palette.divider,
23      },
24      '& input:invalid + fieldset': {
25        borderColor: theme.palette.error.main,
26        borderWidth: 2,
27      },
28      '& input:invalid:hover + fieldset': {
29        borderColor: theme.palette.error.main,
30        borderWidth: 2,
31      },
32      '& input:invalid:focus + fieldset': {
33        borderColor: theme.palette.error.main,
34        borderWidth: 2,
35      },
36    },
37  })
38)(TextField);
39
40export default BugTitleInput;