fix(striker-ui): allow OutlinedInput style override

main
Tsu-ba-me 3 years ago
parent 0c41c45903
commit c1f783286e
  1. 25
      striker-ui/components/OutlinedInput/OutlinedInput.tsx

@ -1,12 +1,16 @@
import { import {
OutlinedInput as MUIOutlinedInput, OutlinedInput as MUIOutlinedInput,
outlinedInputClasses as muiOutlinedInputClasses, outlinedInputClasses as muiOutlinedInputClasses,
styled, OutlinedInputProps as MUIOutlinedInputProps,
} from '@mui/material'; } from '@mui/material';
import { GREY, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME'; import { GREY, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
const OutlinedInput = styled(MUIOutlinedInput)({ const OutlinedInput = (
outlinedInputProps: MUIOutlinedInputProps,
): JSX.Element => {
const { label, sx } = outlinedInputProps;
const combinedSx = {
color: GREY, color: GREY,
[`& .${muiOutlinedInputClasses.notchedOutline}`]: { [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
@ -26,10 +30,23 @@ const OutlinedInput = styled(MUIOutlinedInput)({
borderColor: GREY, borderColor: GREY,
'& legend': { '& legend': {
paddingRight: '1.2em', paddingRight: label ? '1.2em' : 0,
}, },
}, },
}, },
});
...sx,
};
return (
<MUIOutlinedInput
// eslint-disable-next-line react/jsx-props-no-spreading
{...{
...outlinedInputProps,
sx: combinedSx,
}}
/>
);
};
export default OutlinedInput; export default OutlinedInput;

Loading…
Cancel
Save