没有过载匹配此调用 |打字稿 + 反应 + Material UI

Question

我开始将 TypeScript for React 与 Material UI 结合使用，但我遇到了我的第一个组件。

// material
import { Box } from '@material-ui/core';

// ----------------------------------------------------------------------

export default function Logo() {
  return (
    <Box
      component="img"
      alt="logo"
      src="/static/brand/logo.svg"
      height={40}
    />
  );
}

我在 alt 和 src 收到错误：没有匹配此调用的重载。 我感觉这与repo的一些配置有关，但我仍然不知道是什么。

在此先感谢您的帮助:)

Answer 1

它抛出 no overload matches this call 因为 Box 组件没有你试图传递的道具。 alt 和 src

如果您想设置图像的大小，更好的方法是使用 <Box /> 作为包装器

import { Box } from "@material-ui/core";

export default function Logo() {
  return (
    <Box height={40}>
      <img
        alt="logo"
        src="/static/brand/logo.svg"
        style={{ height: "100%" }}
      />
    </Box>
  )
}

The Box component serves as a wrapper component for most of the CSS utility needs.

https://material-ui.com/components/box/

component 属性更改它在 DOM 中呈现的组件（默认情况下 <div>），但不应将其用作组件本身。