[英]Loosing component props when using 'as' styled-component prop on an extended styled-component
[英]TypeScript issue with styled-component's "css" prop and Storybook
從 Storybook 導入內容后,我在 TypeScript 中啟用 styled-component 的css
prop 時遇到了問題,因為 Storybook 依賴於@emotion/core
,其類型聲明定義了 Emotion 自己的css
prop。 該錯誤源於兩個css
prop 類型不兼容的事實。
我熟悉在 TypeScript 中啟用css
prop 的推薦方法(包括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
}
}
}
這一直有效,直到我從導入@emotion/core
的 Storybook 導入index.tsx
中的內容,例如:
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 ,它重現了這個問題。
根據styled-components
庫的文檔,您似乎應該導入style
而不是css
。
我創建了一個示例來展示如何執行此操作:
https://codesandbox.io/s/react-typescript-forked-1xkww4?file=/src/App.tsx
或者,您可以嘗試將css
轉換為其他內容,盡管我不確定它是否有助於解決您遇到的類型定義沖突。
import { css as StyledCss } from 'styled-components';
希望這會有所幫助。
這似乎是由於混合輸入情感和樣式組件引起的問題。 請參閱此鏈接https://stackoverflow.com/a/52129505/4449475
我解決了。 這個問題的解決方案是我們需要覆蓋 h1、h2、div 等內置組件的“css”道具類型,我們可以通過在根文件夾中創建名為“cssprop.d.ts”的新文件來覆蓋它. 將以下代碼添加到“cssprop.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;
}
}
}
請訪問以下鏈接以檢查解決方案。 https://codesandbox.io/s/stupefied-brahmagupta-8lngz
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.