我在启用 styled-component 的 css
时遇到问题一旦我从 Storybook 导入某些内容,就会在 TypeScript 中使用 Prop ,因为 Storybook 依赖于 @emotion/core
,其类型声明定义了 Emotion 自己的 css
支柱。错误源于两个 css
Prop 类型不兼容。
我熟悉 recommended way启用 css
TypeScript 中的 prop(包括 answer on Stack Overflow ),以及关于 how to handle 的建议上面解释的故事书问题。
这是应用程序代码,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
中导入某些内容来自导入 @emotion/core
的 Storybook , 例如: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.
Here's the CodeSandbox创建自 this repository它重现了这个问题。
最佳答案
根据 styled-components
的文档库,看来您应该导入 style
而不是 css
.
我创建了一个示例来展示如何做到这一点:
https://codesandbox.io/s/react-typescript-forked-1xkww4?file=/src/App.tsx
或者,您可以尝试转换 css
作为其他东西,虽然我不确定它是否有助于解决您遇到的类型定义冲突。
import { css as StyledCss } from 'styled-components';
希望这会有所帮助。
关于javascript - 样式组件的 "css" Prop 和 Storybook 的 TypeScript 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66422961/