Стиль * css в стиле компонентов с TypeScript

Question

styled-components имеет плагин, который позволяет следующее:

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

Можно ли как-то сказать, что TypeScript css является допустимым свойством для всех элементов?

Answer 1

Добавьте следующую строку в файл TypeScript внутри вашего проекта, как описано в , эта проблема :

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

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

В качестве альтернативы вы можете вручную дополнить объявление типа модуля react - копировать / вставить содержимое от "styled-components/cssprop" до указанного выше файла:

import { CSSProp } from "styled-components"

interface MyTheme {} // declare custom theme type

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

Последний вариант также позволит вам настроить тип темы css prop.