Recibo el siguiente error en mi aplicación (npm 5.4.2, react 15.4, typescript 2.5.3, webpack 2.2.1, webpack-dev-server 2.4.1).
Esto funcionará:
<div style={{position: 'absolute'}}>working</div>Esto no compilará:
const mystyle = { position: 'absolute' } <div style={mystyle}>not working</div>El error de compilación es:
ERROR in ./src/components/Resource.tsx (61,18): error TS2322: Type '{ style: { position: string; }; children: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Type '{ style: { position: string; }; children: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'. Types of property 'style' are incompatible. Type '{ position: string; }' is not assignable to type 'CSSProperties'. Types of property 'position' are incompatible. Type 'string' is not assignable to type '"inherit" | "initial" | "unset" | "fixed" | "absolute" | "static" | "relative" | "sticky"'. webpack: Failed to compile.Pero ¿cuál es la diferencia? Puedo arreglarlo con:
const mystyle = { position: 'absolute' as 'absolute' }pero es esta una buena solución?
No tengo este problema con otras propiedades de estilo/css.
Encontré un problema similar en github: https://github.com/Microsoft/TypeScript/issues/11465 pero si lo entiendo bien, era un error mecanografiado en una versión anterior.
Cualquier ayuda apreciada.
Utilice el tipo React.CSSProperties:
import React, { CSSProperties } from "react"; const myStyles: CSSProperties = { position: 'absolute', }Luego solo usa el estilo como de costumbre:
<div style={myStyles} />La respuesta de superluminary no funciona si tiene objetos de estilo anidados. En este caso puedes crear un tipo:
import React, { CSSProperties } from 'react'; export interface StylesDictionary{ [Key: string]: CSSProperties; }Y úsalo así:
const styles:StylesDictionary = { someStyle:{ display:'flex', justifyContent:'center', }, someOtherStyle:{ display:'flex', justifyContent:'center', alignItems:'center', } }Y luego:
<div style={styles.someStyle} />