Используя TypeScript, JSS с React создает `тип не назначаемый` для некоторых свойств CSS

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

Похоже, очень странная ошибка ввода ... Но это будет работать так: вы можете создать перечисление Position и просто использовать его.

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

Тогда вы можете просто использовать это перечисление:

classname: {
   position: Position.absolute,
}

Answer 2

Итак, самый простой способ, который я нашел, - это иметь файл, содержащий стили, как файл tsx и назначать свойства следующим образом:

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