带有 TypeScript 的样式组件的“css"道具 [英] Styled components's 'css' prop with TypeScript

问题描述

styled-components 有一个插件可以实现以下功能:

props.theme.colors.text};`}/>

有什么办法可以告诉 TypeScript css 是所有元素的有效属性吗?

解决方案

按照 这个问题:

//例如src/global.d.ts从styled-components/cssprop"导入{}//或 TS 3.8+从styled-components/cssprop"导入类型{}

或者，您可以手动增加 react 模块类型声明 - 从 "styled-components/cssprop" 复制/粘贴内容到上述文件:

import { CSSProp } from "styled-components"interface MyTheme {}//声明自定义主题类型声明模块反应"{接口属性{css?: CSSProp<MyTheme>}}

后一种变体还允许您自定义 css 道具主题类型.

styled-components have a plugin that allows for the following:

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>

Is there any way I can tell TypeScript css is a valid property on all elements?

解决方案

Add following line to a TypeScript file inside your project as described in this issue:

// e.g. src/global.d.ts

import {} from "styled-components/cssprop"
// or TS 3.8+
import type {} from "styled-components/cssprop"

Alternatively you can manually augment the react module type declaration - copy/paste contents from "styled-components/cssprop" to above file:

import { CSSProp } from "styled-components"

interface MyTheme {} // declare custom theme type

declare module "react" {
  interface Attributes {
    css?: CSSProp<MyTheme>
  }
}

Latter variant will also allow you to customize the css prop theme type.

这篇关于带有 TypeScript 的样式组件的“css"道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！