Question

我是TypeScript的新手。我有一个通过create-react-app创建的项目，其中包含TypeScript。我也在那儿使用JSS。在某些时候，我发现某些CSS属性会引发错误。

例如，这里是pointerEvents和position。每当我使用它们时，都会出现错误。

(42,28): Argument of type '{ placeholder: { pointerEvents: string; }; wrapper: { '& select': { position: string; }; }; }' is not assignable to parameter of type 'Record<"wrapper" | "placeholder", CSSProperties> | StyleCreator<"wrapper" | "placeholder", {}>'.
Type '{ placeholder: { pointerEvents: string; }; wrapper: { '& select': { position: string; }; }; }' is not assignable to type 'StyleCreator<"wrapper" | "placeholder", {}>'.
Type '{ placeholder: { pointerEvents: string; }; wrapper: { '& select': { position: string; }; }; }' provides no match for the signature '(theme: {}): Record<"wrapper" | "placeholder", CSSProperties>'.

用pointerEvents代替'pointer-events'就可以了。但是无法使用position属性来完成此操作。

所以我实际上必须解决此问题或找到解决方法。

Answer 1

因此，我发现最简单的方法是将包含样式的文件设置为tsx文件并分配如下属性：

classname: {
  position: 'absolute' as 'absolute',
}

Answer 2

似乎是一个非常奇怪的键入错误...但这将像这样工作：您可以创建一个位置枚举，然后使用它。

export enum Position {
   absolute = 'absolute',
   fixed = 'fixed',
   relative = 'relative',
   unset = 'unset',
   static = 'static',
   sticky = 'sticky'
   //... more position options here ...
}

然后，您可以使用此枚举：

classname: {
   position: Position.absolute,
}

使用TypeScript，带有React的JSS抛出某些CSS属性无法分配的“类型”

2 个答案: