No overload matches this call | 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 :)

Zymka · Accepted Answer · 2021-05-28 08:52:17Z

4

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.

edited May 28, 2021 at 8:52

answered May 28, 2021 at 8:46

Zymka

1411 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

asier Over a year ago

Thanks a lot! I was using the code from a component of a template I purchased. Do you know if that is a eslint config problem or a tsconfig one?

Zymka Over a year ago

Glad that helped! This is ts one I believe, but I wouldn't say it's a problem, it is quite handy and helps you to pass props that are only available for a component. It is only a compiler error and it wouldn't cause problems when the app is built.

asier Over a year ago

I just discovered that with the next update from material-ui (next.material-ui.com) that would work haha

Collectives™ on Stack Overflow

No overload matches this call | Typescript + React + Material UI

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related