如何向styled components传入对象样式并解决TypeScript类型报错

问题描述 #

我希望通过向styled components传入对象的方式简化样式定义：这样所有属性都可以访问theme，无需使用-连接符，还可直接传入整数数值而非所有属性值都写为字符串。
代码如下：

const Div = styled.div(() => ({
  padding: 20,
  border: '1px solid #c6d4df',
  boxSizing: 'border-box'
}))

报错信息 #

TypeScript error in /var/www/property-estimating/frontend/claim-handler/src/components/Overview/index.tsx(13,35):
No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray): StyledComponent<"div", any, {}, never>', gave the following error.
    Argument of type '() => { padding: number; border: string; boxSizing: string; }' is not assignable to parameter of type 'TemplateStringsArray'.
      Type '() => { padding: number; border: string; boxSizing: string; }' is missing the following properties from type 'TemplateStringsArray': raw, concat, join, slice, and 18 more.
  Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type '() => { padding: number; border: string; boxSizing: string; }' is not assignable to parameter of type 'TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, any>>'.
      Type '() => { padding: number; border: string; boxSizing: string; }' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; }, any>>'.
        Type '{ padding: number; border: string; boxSizing: string; }' is not assignable to type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; }, any>>'.
          Type '{ padding: number; border: string; boxSizing: string; }' is not assignable to type 'CSSObject'.
            Types of property 'boxSizing' are incompatible.
              Type 'string' is not assignable to type 'BoxSizing | undefined'.
  Overload 3 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & object, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type '() => { padding: number; border: string; boxSizing: string; }' is not assignable to parameter of type 'TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & object, any>>'.
      Type '() => { padding: number; border: string; boxSizing: string; }' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } & object, any>>'.
        Type '{ padding: number; border: string; boxSizing: string; }' is not assignable to type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ...; } & object, any>>'.
          Type '{ padding: number; border: string; boxSizing: string; }' is not assignable to type 'CSSObject'.  TS2769

    11 | }
    12 | 
  > 13 | const OverviewStyled = styled.div(() => ({
       |                                   ^
    14 |   padding: 20,
    15 |   border: '1px solid #c6d4df',
    16 |   boxSizing: 'border-box'

原因 #

该报错为TypeScript类型推导不匹配导致，你写的代码本身在运行时可以正常执行：

1. 函数返回的样式对象被TypeScript推导为普通object类型，不符合styled-components定义的CSSObject类型要求
2. boxSizing: 'border-box'被推导为通用string类型，没有匹配BoxSizing枚举的合法值范围

解决方案 #

方案1：加as const锁定字面量类型 #

修改成本最低，在返回的样式对象末尾添加as const，让TypeScript把所有属性值推导为固定字面量类型即可匹配类型要求：

const Div = styled.div(() => ({
  padding: 20,
  border: '1px solid #c6d4df',
  boxSizing: 'border-box'
} as const))

方案2：显式标注返回值为CSSObject类型 #

从styled-components中引入CSSObject类型，给函数返回值做显式标注：

import type { CSSObject } from 'styled-components'

const Div = styled.div((): CSSObject => ({
  padding: 20,
  border: '1px solid #c6d4df',
  boxSizing: 'border-box'
}))

方案3：用css辅助函数包裹 #

如果项目中已经用到styled-components自带的css工具函数，可以直接用它包裹样式对象，自动完成类型匹配：

import { css } from 'styled-components'

const Div = styled.div(() => css({
  padding: 20,
  border: '1px solid #c6d4df',
  boxSizing: 'border-box'
}))

内容的提问来源于stack exchange，提问作者Jamie Hutber