React-Admin V4中BooleanField无法使用MUI图标问题咨询

问题背景 #

在react-admin v3中使用的自定义EventBooleanField组件，升级至v4后，传入TrueIcon和FalseIcon属性时出现类型错误：

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

原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

原因分析 #

react-admin v4对BooleanField的TrueIcon/FalseIcon属性类型要求更严格，需要传入带有muiName属性的MUI风格组件，而非直接返回JSX元素的函数。

解决方案 #

将自定义图标封装为带muiName属性的组件，复用原MUI图标的muiName以满足类型要求：

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'
import type { SvgIconProps } from '@mui/material/SvgIcon'

const EventBooleanField = (props: BooleanFieldProps): JSX.Element => {
  const { source, label, valueLabelTrue } = props
  const record = useRecordContext(props)

  // 封装带muiName的自定义图标组件
  const TrueIcon = (iconProps: SvgIconProps) => (
    <DoneIcon data-testid="true" color="success" {...iconProps} />
  )
  TrueIcon.muiName = DoneIcon.muiName

  const FalseIcon = (iconProps: SvgIconProps) => (
    <ClearIcon data-testid="false" color="disabled" {...iconProps} />
  )
  FalseIcon.muiName = ClearIcon.muiName

  return (
    <BooleanField
      sortable={false}
      source={source}
      valueLabelTrue={`${label}: ${get(record, valueLabelTrue)}`}
      valueLabelFalse={`${label}: -`}
      TrueIcon={TrueIcon}
      FalseIcon={FalseIcon}
    />
  )
}
export default EventBooleanField

关键修改点 #

• 将原返回JSX的函数改为接受SvgIconProps的组件，保留原图标属性并透传外部props
• 为自定义图标组件添加muiName属性，直接复用对应MUI图标的muiName值，满足类型校验要求

内容的提问来源于stack exchange，提问作者Heikkisorsa