Question

我正在学习TypeScript，正在尝试将一个使用Emotion的小项目转换为TypeScript。

我坚持以下几点。

以下代码

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

给出错误

TS2345：类型为'（props：挑， HTMLDivElement>，“颜色” | “隐藏” | “样式” | “ defaultChecked” | “ defaultValue” | “ suppressContentEditableWarning” | ... 247更多... | “ css”>＆{...; }）=> {...; }'不能分配给类型的参数 'TemplateStringsArray'。输入'（props：挑， HTMLDivElement>，“颜色” | “隐藏” | “样式” | “ defaultChecked” | “ defaultValue” | “ suppressContentEditableWarning” | ... 247更多... | “ css”>＆{...; }）=> {...; }'缺少以下属性从类型'TemplateStringsArray'中：raw，concat，join，slice和18 更多。 ⌥⏎

我做了一些谷歌搜索并添加了

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

在我的tsconfig.json中的编译器选项中，以及尝试将props的类型添加到这样的样式化组件中

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

那没有用。

有趣的是，似乎只有那一行

    fontWeight: "700"

这就是这里的问题。以下工作正常

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

}));

但是在其他字段上加进了空格。使Emotion与TS一起工作需要做些什么？而且，同样重要的是，这里发生了什么？

我以前使用过类型化语言，但是感觉将TypeScript与其他库集成是非常不透明的。我已经从项目中放弃了PropType，即使它们提供了TS不能提供的运行时检查，因为让它们与TS一起使用非常棘手。

任何帮助，不胜感激！

Answer 1

您可以使用：

const

Answer 2

如果不需要重复使用，可以直接声明类型。我还发现解构 props 并使用模板文字可以更轻松地处理更长的 CSS 声明。

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

如何在React项目中获取Emotion样式的组件以与TypeScript一起使用？

2 个答案: