After creating a custom MUI TextField, I implemented the following styling:
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000",
},
input: {
"&[type=number]": {
"-moz-appearance": "textfield",
},
"&::-webkit-outer-spin-button": {
"-webkit-appearance": "none",
margin: 0,
},
"&::-webkit-inner-spin-button": {
"-webkit-appearance": "none",
margin: 0,
},
},
}));
<CustomDisableInput
fullWidth
variant="standard"
size="small"
type="text"
sx={{
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
}}
InputProps={{
disableUnderline: true,
}}
disabled={!isEditMode}
/>
Now, my goal is to apply the styling defined in:
sx={{ backgroundColor: "grey.300",borderRadius: "3px",paddingX: "3px"}}
only when the value of isEditMode is set to true.
What I attempted:
<CustomDisableInput
fullWidth
variant="standard"
size="small"
type="text"
sx={ isEditMode && {
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
}}
InputProps={{
disableUnderline: true,
}}
disabled={!isEditMode}
/>
However, this implementation resulted in an error message:
Type 'false | { backgroundColor: "grey.300"; borderRadius: string; paddingX: string; }' is not assignable to type 'SxProps<Theme> | undefined'.
Type 'false' is not assignable to type 'SxProps<Theme> | undefined'. TS2322