BugTitleInput.tsx

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