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

它抛出与此调用匹配的无重载，因为 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>
  )
}

<块引用>

Box 组件作为大多数 CSS 的包装组件实用需求。

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

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

没有与此调用匹配的重载 |打字稿 + 反应 + 材质 UI

1 个答案: