javascript - TypeScript issue with styled-component's "css" prop and Storybook - Stack Overflow

IT技术

更新时间：2025-03-060

admin管理员组
文章数量:1279237

I'm having issues with enabling styled-ponent's css prop in TypeScript as soon as I import something from Storybook, because Storybook depends on @emotion/core, whose type declaration defines Emotion's own css prop. The error stems from the fact that the two css prop types being inpatible.

I'm familiar with the remended way of enabling the css prop in TypeScript (including the answer on Stack Overflow), as well as suggestions on how to handle the Storybook problem explained above.

This is the application code, index.tsx:

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

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

and this is the type declaration, styled-ponents.d.ts, which contains the attempted fix:

import { CSSProp } from "styled-ponents";

// 

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

This works until I import something in index.tsx from Storybook which imports @emotion/core, for example:

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

Then TypeScript fails with the following errors:

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 inpatible.
      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 es from property 'css' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'

styled-ponents.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-ponents.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.

Here's the CodeSandbox created from this repository which reproduces this issue.