Búsqueda de sitios web

reactjs - Cómo extender `CSSProperties` en un proyecto de React

Soy del mundo de javascript y soy nuevo en typescript. Tengo un proyecto de react escrito en typescript. Declaro un estilo en línea pero obtengo la siguiente advertencia cuando lo uso en un componente de react:

Type '{ color: string; fontSize: string; fontWeight: number; }' is not assignable to type 'CSSProperties'.

A continuación se muestra el código para la declaración de estilo.

const styles = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column'
    }
};

a continuación está el código que lo usa. Y la advertencia aparece con esta línea <div style={styles.promAlert}>.

<div style={styles.promAlert}>
    {alert.substring('promotions.'.length)}
</div>

He buscado que esto puede ser causado por CSSProperties definido en react. Puede que necesite extender esta clase y agregar más atributos en ella. Me pregunto cómo puedo hacer eso en mi proyecto.

Otra pregunta es por qué CSSProperties no incluye todas las claves de CSS compatibles.

Respuesta #1

TypeScript espera tipos específicos "flex" y "column", pero sin ningún trabajo adicional, recibe string para ambos, lo cual es demasiado amplio y poco descriptivo. Puedes ver el mismo error ocurrir aquí:

declare const value: string
const a: "a" = value // errors, `string` can't be assigned to the more specific `"a"`

Hay algunas soluciones aquí. Creo que la más elegante es as const, así que tratará los valores de tu objeto como sus tipos literales específicos. También asegúrate de que tu versión de TS esté actualizada para usar esto.

const styles = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column',
    },
} as const

Alternativamente, puedes declarar tus objetos de estilo por separado y hacer que sean verificados por tipos mediante la interfaz CSSProperties. Esto proporciona autocompletado en cada propiedad, pero esto no se puede hacer (fácilmente) como un único objeto completo.

const promptAlert: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column'
}

// you can re-assign all of your styles into a single object if you want,
// but I think it would be easier to access `promptAlert` directly at this point
const styles = {
  promptAlert,
}

Otras soluciones menos ideales:

  • { [key: string]: React.CSSProperties }: esto no realiza verificación de tipo sobre el nombre de cada estilo, por lo que puedes hacer styles.abcdef sin ningún error

  • Aplicando cada estilo as React.CSSProperties: esto no detecta errores en los propios estilos, por ejemplo, podrías escribir mal display: "fleex"

Respuesta #2

Definir el tipo styles como se muestra a continuación preservará la verificación de tipos en todas tus clases CSS y sus propiedades:

const styles: { [key: string]: React.CSSProperties } = {
    promAlert: {
        display: 'flex',
        flexDirection: 'column'
    }
};

Artículos relacionados