I'm on a mission to set up a Typescript project with Material-UI v4.11.4 and implement emotion for styling in anticipation of the MUI v5 release. The aim is to integrate emotion into the project so developers can transition to using the new styling instead of relying on the soon-to-be-deprecated makeStyles function.
Everything is functioning well except for encountering a type error from Typescript regarding the css prop. I've been scouring the documentation for a solution without luck. Do I need to install an additional types package for Typescript to recognize the css prop exists on the MUI components?
import { Button } from "@material-ui/core";
const Btn = () => {
return (
// Styles apply correctly but trigger 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<...>'.