CODEWITHSUNDEEP
reactjstypescriptmaterial-uiemotion
jdk905
jdk905

Reputation: 635

Can't get Typescript to understand the css prop (emotion) on Material-UI components

I'm wanting to setup a Typescript project that is using Material-UI v4.11.4 to use emotion for styling in preparation for the MUI v5 release. The goal is to introduce emotion into the project so that developers can start using the new styling instead of continuing to write styles via the soon to be deprecated makeStyles function.

I have everything working except for the fact that I get a type error from Typescript on the css prop. I've been searching the documentation for an answer, but can't seem to find anything. Is there some additional types package I need to install in order for Typescript to understand the css prop exists on the MUI components?

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

const Btn = () => {
  return (
    // this successfully applies styles, but causes a TS error
    <Button css={{ backgroundColor: "red" }}>
      Click Me
    </Button>
  );
}

TS Error:

Property 'css' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; ... 6 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.

Upvotes: 6

Views: 4134

Answers (1)

jdk905
jdk905

Reputation: 635

Well I feel stupid. I was thinking it was an issue with MUI not exporting types correctly, but it turns out I just needed to set the jsxImportSource in my tsconfig.json

"compilerOptions": {
  "jsxImportSource": "@emotion/react"
}

Upvotes: 12

Related Questions