使用 TypeScript，JSS 和 React 为某些 css 属性抛出“type is unassignable”

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>'.

用 'pointer-events' 替换 pointerEvents 就成功了。但是 position 属性.

无法做到这一点

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

Answer 1

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

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

Answer 2

似乎是一个非常奇怪的打字错误...但这会像这样工作：您可以创建一个 Position 枚举，然后直接使用它。

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

那么你可以只使用这个枚举：

classname: {
   position: Position.absolute,
}

使用 TypeScript，JSS 和 React 为某些 css 属性抛出“type is unassignable”

Using TypeScript, JSS with React throws `type is unassignable` for some css properties

typescript

reactjs

typescript-typings

jss