Quiero definir jsx así:
<table style={{'--length': array.lenght}}> <tbody> <tr>{array}</tr> </tbody> </table>y uso --length en CSS, también tengo celdas que tienen --count que muestra el conteo usando el pseudoselector de CSS (usando el truco del contador).
pero mecanografiado arroja error:
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'.¿Es posible cambiar el tipo de atributo de estilo para aceptar la variable CSS (propiedades personalizadas) o hay alguna forma de forzar cualquier objeto de estilo?
Me gusta esto:
render(){ var style = { "--my-css-var": 10 } as React.CSSProperties; return <div style={style}>...</div> }Si vas a la definición de CSSProperties , verás:
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 */ } Ese enlace brinda ejemplos de cómo resolver el error de tipo al aumentar la definición de Properties en csstype o convertir el nombre de la propiedad en any archivo .
Puede agregar una aserción de tipo a la variable. es decir {['--css-variable' as any]: value }
<table style={{['--length' as any]: array.lenght}}> <tbody> <tr>{array}</tr> </tbody> </table>