类型 'string' 不能分配给 React + TypeScript 中的类型 'WebkitAppearance | undefined'？

Question

我看到你做的像 <div style={{WebkitAppearance: SOMETHING}}></div>，但什么是东西？

type PropType = {
  appearance: string;
}

function MyComponent({
  appearance
}: PropType) {
  const style = {
    WebkitAppearance: appearance
  }
}

我收到这个错误：

Type 'string' is not assignable to type 'WebkitAppearance | undefined'

如何在 React + TypeScript 中设置 -webkit-appearance？

Answer 1

“SOMETHING”是来自 csstype 的 Property.WebkitAppearance 类型。

您可能想使用 appearance 而不是 WebkitAppearance，这是标准的属性。仅当您将其设置为 non-standard value 时才使用 WebkitAppearance，例如 "attachment".

请注意，这些都不能分配给 string（因此您的错误）；您必须使用 csstype 包中定义的类型：

import { Property } from './node_modules/csstype';

type PropType = {
  appearance: Property.WebkitAppearance;
}

Playground examples

类型 'string' 不能分配给 React + TypeScript 中的类型 'WebkitAppearance | undefined'？

Type 'string' is not assignable to type 'WebkitAppearance | undefined' in React + TypeScript?

css

webkit

typescript

reactjs