I'm currently using emotion within a create-react-app setup with Typescript, and I want to utilize the css prop from emotion.
Following the guidelines in their best practices, my aim is to define my styles outside of the component using a const:
import { css } from "@emotion/react";
const customStyle = css({
backgroundColor: "red",
display: "inline-block",
height: 24,
width: 24
});
export default function App() {
return <div css={customStyle}></div>;
}
I've followed their specific steps for implementing the css prop with Typescript and adjusted my TypeScript compiler options as follows:
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"
However, despite this configuration, the styles are not being applied. Instead, a div displaying an error message is rendered:
<div css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."></div>
I'm puzzled why the styles aren't taking effect. Additionally, I have created a simple demo on codesandbox.