我創建了自定義 MUI TextField
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}
/>
現在我想申請
sx={{ backgroundColor: "grey.300",borderRadius: "3px",paddingX: "3px"}}
只有當isEditMode是true。
我試過什么？
<CustomDisableInput
fullWidth
variant="standard"
size="small"
type="text"
sx={ isEditMode && {
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
}}
InputProps={{
disableUnderline: true,
}}
disabled={!isEditMode}
/>
但它給出了錯誤
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
uj5u.com熱心網友回復：
...
sx={isEditMode ? {
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
} : {}}
或者
const CustomDisableInput = styled(({ isEditMode, ...props }) => (
<TextField {...props} />
))(({ theme, isEditMode }) => ({
".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,
},
},
...isEditMode && {
backgroundColor: "grey.300",
borderRadius: "3px",
paddingX: "3px",
}
}));
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/391389.html