时间戳

首页 > 解决方案 > 如何从“material-ui”导入类型？

reactjs - 如何从“material-ui”导入类型？

问题描述

我正在开发一个react带有material-uiin的应用程序typescript。我想知道在哪里可以找到material组件的所有类型定义。我已尝试安装@types/material-ui，但效果不佳。请参见下面的示例：

import * as React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';
import { SvgIconProps } from "material-ui";

export const Logo = (props: SvgIconProps) => (
  <SvgIcon {...props}>
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </SvgIcon>
);

我在编译时遇到以下错误：

Type '{ children: Element; color?: string | undefined; hoverColor?: string | undefined; onMouseEnter?: ((event: MouseEvent<{}, MouseEvent>) => void) | undefined; onMouseLeave?: ((event: MouseEvent<{}, MouseEvent>) => void) | undefined; ... 413 more ...; ref?: string | ... 3 more ... | undefined; }' is not assignable to type 'SvgIconProps'.
  Types of property 'color' are incompatible.
    Type 'string | undefined' is not assignable to type '"inherit" | "default" | "disabled" | "error" | "primary" | "secondary" | "action" | undefined'.
      Type 'string' is not assignable to type '"inherit" | "default" | "disabled" | "error" | "primary" | "secondary" | "action" | undefined'.

标签： reactjstypescriptmaterial-ui

解决方案

具体道具可以导入材质UI本身。

对于SvgIcon问题中的组件，可以使用以下命令导入Prop Typing ：

import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';

推荐阅读