87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
|
import TextField from '@mui/material/TextField';
|
||
|
|
import { outlinedInputClasses } from '@mui/material/OutlinedInput';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import { createTheme, ThemeProvider, Theme, useTheme } from '@mui/material/styles';
|
||
|
|
|
||
|
|
const customTheme = (outerTheme: Theme) =>
|
||
|
|
createTheme({
|
||
|
|
palette: {
|
||
|
|
mode: outerTheme.palette.mode,
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
MuiTextField: {
|
||
|
|
styleOverrides: {
|
||
|
|
root: {
|
||
|
|
'--TextField-brandBorderColor': '#E0E3E7',
|
||
|
|
'--TextField-brandBorderHoverColor': '#B2BAC2',
|
||
|
|
'--TextField-brandBorderFocusedColor': '#6F7E8C',
|
||
|
|
'& label.Mui-focused': {
|
||
|
|
color: 'var(--TextField-brandBorderFocusedColor)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
MuiOutlinedInput: {
|
||
|
|
styleOverrides: {
|
||
|
|
notchedOutline: {
|
||
|
|
borderColor: 'var(--TextField-brandBorderColor)',
|
||
|
|
},
|
||
|
|
root: {
|
||
|
|
[`&:hover .${outlinedInputClasses.notchedOutline}`]: {
|
||
|
|
borderColor: 'var(--TextField-brandBorderHoverColor)',
|
||
|
|
},
|
||
|
|
[`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
|
||
|
|
borderColor: 'var(--TextField-brandBorderFocusedColor)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
MuiFilledInput: {
|
||
|
|
styleOverrides: {
|
||
|
|
root: {
|
||
|
|
'&::before, &::after': {
|
||
|
|
borderBottom: '2px solid var(--TextField-brandBorderColor)',
|
||
|
|
},
|
||
|
|
'&:hover:not(.Mui-disabled, .Mui-error):before': {
|
||
|
|
borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
|
||
|
|
},
|
||
|
|
'&.Mui-focused:after': {
|
||
|
|
borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
MuiInput: {
|
||
|
|
styleOverrides: {
|
||
|
|
root: {
|
||
|
|
'&::before': {
|
||
|
|
borderBottom: '2px solid var(--TextField-brandBorderColor)',
|
||
|
|
},
|
||
|
|
'&:hover:not(.Mui-disabled, .Mui-error):before': {
|
||
|
|
borderBottom: '2px solid var(--TextField-brandBorderHoverColor)',
|
||
|
|
},
|
||
|
|
'&.Mui-focused:after': {
|
||
|
|
borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default function CustomizedInputsStyleOverrides() {
|
||
|
|
const outerTheme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{ display: 'grid', gridTemplateColumns: { sm: '1fr 1fr 1fr' }, gap: 2 }}
|
||
|
|
>
|
||
|
|
<ThemeProvider theme={customTheme(outerTheme)}>
|
||
|
|
<TextField label="Outlined" />
|
||
|
|
<TextField label="Filled" variant="filled" />
|
||
|
|
<TextField label="Standard" variant="standard" />
|
||
|
|
</ThemeProvider>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|