TypeScript中如何在@emotion/styled组件间共享带props的样式

正确实现代码 #

import styled from "@emotion/styled";
import { css } from "@emotion/react";

// 1. 先定义公共样式接收的props类型
interface InputStyleProps {
  invalid?: boolean;
}

// 2. 给css函数显式传入泛型参数，声明该样式块接收的props类型
const InputStyling = css<InputStyleProps>`
  width: 100%;
  border-style: solid;
  /* 注意：如果直接用CSS颜色名需要加引号，若是导入的主题变量可直接使用 */
  border-color: ${props => props.invalid ? '#f00' : '#00f'};
`;

// 3. styled组件直接复用同一个props类型即可，类型会自动匹配
export const BaseInput = styled.input<InputStyleProps>`
  ${InputStyling}
`;

export const BaseTextarea = styled.textarea<InputStyleProps>`
  ${InputStyling}
`;

核心修改说明 #

报错的核心原因是：css函数无法自动识别你在插值函数内声明的props类型，也无法和后续styled组件定义的props做自动匹配，导致TS认为二者类型不兼容，触发重载匹配失败错误。
你之前只给styled组件声明了props类型，但没有给css创建的公共样式块声明接收的props类型，所以就算定义了interface还是会报错。

如果需要叠加其他公共样式（比如你提到的resetInputCss），只需要给对应的css块也加上相同的泛型声明即可，组合使用时类型会自动校验匹配。

内容的提问来源于stack exchange，提问作者Caleb Jay