样式组件的“css”道具和 Storybook 的 TypeScript 问题

Question

我在css从 Storybook 导入某些内容后立即在 TypeScript 中启用样式组件的道具时遇到问题，因为 Storybook 依赖于@emotion/core，其类型声明定义了 Emotion 自己的css道具。该错误源于两种css道具类型不兼容的事实。

我熟悉在 TypeScript中启用prop的推荐方法css（包括Stack Overflow 上的答案），以及有关如何处理上述 Storybook 问题的建议。

这是应用程序代码，index.tsx：

import React from 'react'
import { css } from 'styled-components'

export default function App() {
  return (
    <h1
      css={css`
        color: red;
      `}
    >
      Hello world!
    </h1>
  )
}

这是类型声明，styled-components.d.ts，其中包含尝试的修复：

import { CSSProp } from "styled-components";

// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-780019806

declare module 'react' {
  interface DOMAttributes<T> {
    css?: CSSProp
  }
}
declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      css?: CSSProp
    }
  }
}

这一直有效，直到我index.tsx从 Storybook 中导入了一些东西@emotion/core，例如：

import { storiesOf } from '@storybook/react'
// ...

然后 TypeScript 失败并出现以下错误：

index.tsx:8:7 - error TS2322: Type 'FlattenSimpleInterpolation' is not assignable to type 'InterpolationWithTheme<any>'.
  Type 'readonly SimpleInterpolation[]' is not assignable to type 'ObjectInterpolation<undefined>'.
    Types of property 'filter' are incompatible.
      Type '{ <S extends SimpleInterpolation>(predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => value is S, thisArg?: any): S[]; (predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => unknown, thisArg?: any): SimpleInterpolation[]; }' is not assignable to type 'string | string[] | undefined'.
        Type '{ <S extends SimpleInterpolation>(predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => value is S, thisArg?: any): S[]; (predicate: (value: SimpleInterpolation, index: number, array: readonly SimpleInterpolation[]) => unknown, thisArg?: any): SimpleInterpolation[]; }' is missing the following properties from type 'string[]': pop, push, concat, join, and 27 more.

8       css={css`
        ~~~

  node_modules/@emotion/core/types/index.d.ts:84:5
    84     css?: InterpolationWithTheme<any>
           ~~~
    The expected type comes from property 'css' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'

styled-components.d.ts:7:5 - error TS2717: Subsequent property declarations must have the same type.  Property 'css' must be of type 'InterpolationWithTheme<any>', but here has type 'CSSProp<any> | undefined'.

7     css?: CSSProp
      ~~~

  node_modules/@emotion/core/types/index.d.ts:84:5
    84     css?: InterpolationWithTheme<any>
           ~~~
    'css' was also declared here.

styled-components.d.ts:13:7 - error TS2717: Subsequent property declarations must have the same type.  Property 'css' must be of type 'InterpolationWithTheme<any>', but here has type 'CSSProp<any> | undefined'.

13       css?: CSSProp
         ~~~

  node_modules/@emotion/core/types/index.d.ts:96:7
    96       css?: InterpolationWithTheme<any>
             ~~~
    'css' was also declared here.

这是从这个存储库创建的 CodeSandbox，它重现了这个问题。

Answer 1

根据该styled-components库的文档，您似乎应该导入style而不是css.

我创建了一个示例，展示了如何执行此操作：
https://codesandbox.io/s/react-typescript-forked-1xkww4 ?file=/src/App.tsx

或者，您可以尝试将其转换css为其他内容，尽管我不确定这是否有助于解决您遇到的类型定义冲突。

import { css as StyledCss } from 'styled-components';

希望这有帮助。