EN VI

MUI styled TS Error : No overload matches this call

I am getting this error:

No overload matches this call.

How to resolve this error?

I am trying to create custom button. I am able to create button but getting above error.

import * as React from "react";
import Button, { ButtonProps } from "@mui/material/Button";
import { styled, Theme } from "@mui/material/styles";

interface DPWButtonProps extends ButtonProps {
  "dpw-variant": string;
}

const getStyles = (type: string, theme: Theme) => {
  const commonStyle: object = {};
  const themeStyles = {
    primary: {
      ...commonStyle,
      background: `red`
    },
    default: commonStyle
  };

  return themeStyles[type as keyof typeof themeStyles] || themeStyles.default;
};

const DWButton = styled(Button)<DPWButtonProps>(
  ({ "dw-variant": variant, theme }) => {
    return getStyles(variant, theme);
  }
);

export default DWButton;

I am using it like this:

 <DWButton dw-variant="primary">nnn</DWButton>

Solution:

Besides the typo, the issue is that your getStyles function returns a general object, whereas MUI styled expects a CSSObject (or, to be more accurate, in your case, a function that returns said CSSObject).

The styled function is powerful with a lot of overloads and complex types, but the drawback is indeed that the error message might be so big that it does not fit in the preview, making it difficult to pinpoint the root cause of the problem.

In your case, you can fix it by typing as CSSObject instead of plain object:

import { CSSObject } from "@mui/material/styles";

const commonStyle: CSSObject = {}; // Instead of `object` type