如何在 .tsx 组件中使用 material ui icon v1.0.0-beta.36

Question

我正在使用 material-ui-icons v1.0.0-beta.36.

我正在尝试在 .tsx 组件中使用 Search 图标。

.tsx分量：

import React, { Component, ReactElement } from 'react'
import Search from 'material-ui-icons/Search'

import { Button, CustomInput } from '../thirdParty/CreativeTim/components'
import { ENTER_KEY_CODE } from '../../../Services/Constants'
import { SvgIconProps } from 'material-ui/SvgIcon'

let SearchIcon: ReactElement<SvgIconProps> = <Search />

在 <Search /> 组件上出现此错误：

JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | Component<...> | null' is not a constructor function for JSX elements.
  Type 'Component<SvgIconProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
    Type 'Component<SvgIconProps, any, any>' is not assignable to type 'ElementClass'.ts(2605)

此外，尝试在不分配变量的情况下使用它：

.tsx分量：

import React, { Component, ReactElement } from 'react'
import Search from 'material-ui-icons/Search'

import { Button, CustomInput } from '../thirdParty/CreativeTim/components'
import { ENTER_KEY_CODE } from '../../../Services/Constants'
import { SvgIconProps } from 'material-ui/SvgIcon'

...

  render() {
    return (
      <div>
        ...
        <Button
          onClick={this.onSearchclick}
          color="white"
          aria-label="edit"
          justIcon
          round
        >
          <Search />
        </Button>
      </div>
    )
  }
}

在 <Search /> 组件上出现同样的错误：

JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | Component<...> | null' is not a constructor function for JSX elements.
  Type 'Component<SvgIconProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
    Type 'Component<SvgIconProps, any, any>' is not assignable to type 'ElementClass'.
      Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '{ (): ReactNode; (): false | Element | null; }'.
          Type 'ReactNode' is not assignable to type 'false | Element | null'.
            Type 'undefined' is not assignable to type 'false | Element | null'.ts(2605)

无法在线找到任何解决方案..

如有任何帮助，我们将不胜感激。

Answer 1

您需要像这样导入它：

import {Search} from 'material-ui-icons/Search';

Answer 2

我最终通过使用 any 类型声明图标解决了这个问题：

const SearchIcon: any = Search

然后将其作为常规组件使用：

<SearchIcon />

如何在 .tsx 组件中使用 material ui icon v1.0.0-beta.36

how to use material ui icon v1.0.0-beta.36 in .tsx component

typescript

reactjs

material-ui

tsx