V4中的布尔域不再接受Mui图标

Question

在react-admin v3中，我使用了以下功能组件:

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

升级到v4后，最后两个道具抛出错误:

Type '() => JSX.Element' is not assignable to type 'OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }'.
Type '() => JSX.Element' is not assignable to type '{ muiName: string; }'

如何在OverridableComponent<SvgIconTypeMap<{}, "svg">> & { muiName: string; }类型中使用Mui图标?

Answer 1

我遇到这个问题是因为新的api约束到SvgIconComponent。我使用下面的行代码解决了这个问题。

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" />
...