问题

import { SvgIconComponent } from '@mui/icons-material'
import { Typography, TypographyProps } from '@mui/material'

type Props = TypographyProps & {
  Icon: SvgIconComponent
  iconFontSize: /* 插入类型这里！ */
}

export const IconTypography = ({
  Icon,
  iconFontSize = 'inherit',
  columnGap = 1,
  children,
  ...props
}: Props) => {
  return (
    <Typography display="flex" alignItems="center" columnGap={columnGap} {...props}>
      <Icon fontSize={iconFontSize} />
      {children}
    </Typography>
  )
}

import { SvgIconComponent } from '@mui/icons-material'
import { Typography, TypographyProps} from '@mui/material'

type Props = TypographyProps & {
  Icon: SvgIconComponent
  iconFontSize: /* insert type here! */
}

export const IconTypography = ({
  Icon,
  iconFontSize = 'inherit',
  columnGap = 1,
  children,
  ...props
}: Props) => {
  return (
    <Typography display="flex" alignItems="center" columnGap={columnGap} {...props}>
      <Icon fontSize={iconFontSize} />
      {children}
    </Typography>
  )
}

答案1

得分: 1

你可以将 `iconFontSize` 定义为联合类型的	'inherit' | 'large' | 'medium' | 'small'：

```typescript
type Props = TypographyProps & {
  Icon: SvgIconComponent
  iconFontSize: "inherit" | "small" | "medium" | "large" 
}

如果你想使用 MUI 类型定义文件中的确切类型，你也可以这样做：

import { OverridableStringUnion } from '@mui/types';

fontSize?: OverridableStringUnion<
  'inherit' | 'large' | 'medium' | 'small',
  SvgIconPropsSizeOverrides
>;

OverridableStringUnion 类型本质上是这样定义的：

export type OverridableStringUnion<T extends string | number, U = {}> = GenerateStringUnion<
  Overwrite<Record<T, true>, U>
>;

在 MUI 文档中查看类型定义：https://mui.com/material-ui/api/svg-icon/

<details>
<summary>英文:</summary>

You can type `iconFontSize` as a union type of 	&#39;inherit&#39; | &#39;large&#39; | &#39;medium&#39; | &#39;small&#39;:

```typescript
type Props = TypographyProps &amp; {
  Icon: SvgIconComponent
  iconFontSize: &quot;inherit&quot; | &quot;small&quot; | &quot;medium&quot; | &quot;large&quot; 
}

If you want to use the exact type from the MUI type definition file, you can alternatively use:

import { OverridableStringUnion } from '@mui/types';

fontSize?: OverridableStringUnion<
  'inherit' | 'large' | 'medium' | 'small',
  SvgIconPropsSizeOverrides
>;

The OverridableStringUnion type is in turn defined as such:

export type OverridableStringUnion<T extends string | number, U = {}> = GenerateStringUnion<
  Overwrite<Record<T, true>, U>
>;

See the type definition in the MUI docs here: https://mui.com/material-ui/api/svg-icon/