没有重载匹配这个调用 | Typescript + React + Material UI

Question

I'm getting started with TypeScript for React combined with Material UI and I'm getting stuck with my very first component.

 // material import { Box } from '@material-ui/core'; // ---------------------------------------------------------------------- export default function Logo() { return ( <Box component="img" alt="logo" src="/static/brand/logo.svg" height={40} /> ); }

I am getting errors at alt and src: No overload matches this call. I have the feeling that this is related to some configuration of the repo, but I still don't know what.

Thanks in advance for the help:)

Answer 1

It throws the no overload matches this call because the Box component doesn't have the props you are trying to pass. alt and src

A better approach would be to use the <Box /> as a wrapper if you want to set the size of the image

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/

The component prop changes the component that it renders in the DOM ( <div> is by default), but it shouldn't be used as the component itself.