web-dev-qa-db-fra.com

Comment définir les variables CSS dans l'attribut style dans React et typescript

Je veux définir jsx comme ceci:

<table style={{'--length': array.lenght}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>

et j'utilise --length dans css, j'ai aussi des cellules qui ont --count qui montre count en utilisant le pseudo sélecteur css (en utilisant le compteur de hack).

mais erreur d'affichage TypeScript:

TS2326: Types of property 'style' are incompatible.
  Type '{ '--length': number; }' is not assignable to type 'CSSProperties'.
    Object literal may only specify known properties, and ''--length'' does not exist in type 'CSSProperties'.

est-il possible de changer le type d'attribut de style pour accepter la variable css (propriétés personnalisées) ou existe-t-il un moyen d'en forcer un sur un objet de style?

reactjstypescriptjsxtsx
18
jcubic

Si vous allez dans la définition de CSSProperties , vous verrez:

export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You're able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
}

Ce lien donne des exemples de résolution de l'erreur de type en augmentant la définition de Properties dans csstype ou en transtypant le nom de la propriété en any.

7
Matt McCutchen

Comme ça:

render(){
  var style = { "--my-css-var": 10 } as React.CSSProperties;
  return <div style={style}>...</div>
}
25
ixrock

Vous pouvez ajouter une assertion de type à la variable. c'est-à-dire{['--css-variable' as any]: value }

<table style={{['--length' as any]: array.lenght}}>
   <tbody>
      <tr>{array}</tr>
   </tbody>
</table>
4
Carlos A. Cabrera