Issue
In react-admin v3 I used the following functional component:
import ClearIcon from '@mui/icons-material/Clear'
import DoneIcon from '@mui/icons-material/Done'
import get from 'lodash/get'
import { BooleanField, BooleanFieldProps, useRecordContext } from 'react-admin'
const EventBooleanField = (props: BooleanFieldProps): JSX.Element => {
const { source, label, valueLabelTrue } = props
const record = useRecordContext(props)
const falseIcon = () => <ClearIcon data-testid="false" color="disabled" />
const trueIcon = () => <DoneIcon data-testid="true" color="success" />
return (
<BooleanField
sortable={false}
source={source}
valueLabelTrue={`${label}: ${get(record, valueLabelTrue)}`}
valueLabelFalse={`${label}: -`}
TrueIcon={trueIcon}
FalseIcon={falseIcon}
/>
)
}
export default EventBooleanField
After upgrading to v4 the last two props throw an error:
Type '() => JSX.Element' is not assignable to type 'OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }'.
Type '() => JSX.Element' is not assignable to type '{ muiName: string; }'
How can I use a Mui icon for type OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }
?
Solution
I faced this issue because the new api constraint to SvgIconComponent
. I resolved this issue by using the line code below.
import { SvgIcon } from "@mui/material"
import { Warning, CheckCircle } from "@mui/icons-material"
const NotApprovedIcon: typeof SvgIcon = (props) => {
return <Warning color="error" {...props} />
}
NotApprovedIcon.muiName = "NotApprovedIcon"
const ApprovedIcon: typeof SvgIcon = (props) => {
return <CheckCircle color="success" {...props} />
}
ApprovedIcon.muiName = "NotApprovedIcon"
...
<BooleanField
source="approve"
FalseIcon={NotApprovedIcon}
TrueIcon={ApprovedIcon} textAlign="center" />
...
Answered By - React Admin Lover
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.