typescript 如何输入Material UI Icon的fontSize属性？

omhiaaxx 于 2023-06-07 发布在 TypeScript

关注(0)|答案(1)|浏览(150)

我已经组成了下面的组件，我需要为自定义iconFontSize属性应用一个类型。我该怎么做？

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>
  )
}

先谢谢你了！

typescript

来源：https://stackoverflow.com/questions/76384941/how-to-type-material-ui-icons-fontsize-prop

1条答案

按热度按时间

06odsfpq1#

您可以键入iconFontSize作为'inherit'的联合类型|'大'|‘中等’|“小”：

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/

赞(0）回复(0）举报 2023-06-07

我来回答

typescript 如何输入Material UI Icon的fontSize属性？

1条答案

相关问题

热门标签

最新问答