类型“字符串”不可分配给类型“WebkitAppearance |在 React + TypeScript 中未定义？

【问题标题】：Type 'string' is not assignable to type 'WebkitAppearance | undefined' in React + TypeScript?类型“字符串”不可分配给类型“WebkitAppearance |在 React + TypeScript 中未定义？
【发布时间】：2021-09-19 23:34:30
【问题描述】：

我看到你像<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？

【问题讨论】：

标签： css reactjs typescript webkit

【解决方案1】：

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

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

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

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

type PropType = {
  appearance: Property.WebkitAppearance;
}

Playground examples

【讨论】：