如何让 React 项目中的 Emotion 样式组件与 TypeScript 一起使用？

Question

I'm learning TypeScript and am trying to convert a tiny project that uses Emotion to TypeScript.

I've gotten stuck on the following point.

The following code

export const Title = styled.div(props => ({
    fontSize: "20px",
    color: props.color,
    fontWeight: "700"
}));

gives the error

TS2345: Argument of type '(props: Pick, HTMLDivElement>, "color" | "hidden" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "css"> & { ...; }) => { ...; }' is not assignable to parameter of type 'TemplateStringsArray'. Type '(props: Pick, HTMLDivElement>, "color" | "hidden" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "css"> & { ...; }) => { ...; }' is missing the following properties from type 'TemplateStringsArray': raw, concat, join, slice, and 18 more. ⌥⇧⏎ ⌥⏎

I did some googling and added

   "types": ["@emotion/core","@emotion/styled"],                           /* Type declaration files to be included in compilation. */

to my compiler options in my tsconfig.json , as well as trying to add a type for the props to the styled component like this

type StyleProps = {
    [k: string]: string | undefined;
}
export const Title = styled.div<StyleProps>(props => ({
    fontSize: "20px",
    color: props.color,
    fontWeight: "700"
}));

That didn't work.

The funny thing is it seems it's only the line

    fontWeight: "700"

that is the issue here. The following works fine

export const Container = styled.div(props => ({
    backgroundColor: props.color,
    padding: "20px",
    borderRadius: "14px",
    marginBottom: "20px",
    border: "1px solid rgba(100,100,50,0.5)",

}));

But balks at other fields added. What is it one needs to do to get Emotion to work with TS? And, just as important, what is going on here?

I've worked with typed languages before, but feel like integrating TypeScript with other libraries is extraordinarily opaque. I've already abandoned PropTypes from the project, even if they provide runtime checking that TS doesn't, because it was tricky to get them to work with TS.

Any help much appreciated!

Answer 1

You can use:

interface StyleProps {
   color: string;
}    

export const Title = styled.div<StyleProps>`
   font-size: 20,
   color: ${color},
   font-weight: 700
`;

Answer 2

You can declare the type directly if you don't need to re-use it. I also find that destructuring the props and using the template literals makes it easier to work on longer CSS declarations.

export const Title = styled.div<{color: string}>(({color}) => `
    font-size: 20px;
    color: ${color};
    font-weight: 700;
`);