reactjs - Hvordan utvide `CSSProperties` i et React-prosjekt

Jeg kommer fra javascript-verdenen og er ny på typescript. Jeg har et React-prosjekt skrevet i typescript. Jeg erklærer en inline-stil, men fikk følgende advarsel når jeg brukte den i en React-komponent:

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

Nedenfor er koden for stildeklarasjonen.

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

nedenfor er koden som bruker det. Og advarselen kommer med denne linjen <div style={styles.promAlert}>.

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

Jeg har undersøkt at dette kan være forårsaket av CSSProperties definert i React. Jeg kan trenge å utvide denne klassen og legge til flere attributter på den. Jeg lurer på hvordan jeg kan gjøre det i prosjektet mitt.

Et annet spørsmål er hvorfor CSSProperties ikke inkluderer alle støttede CSS-nøkler.

Svar #1

TypeScript forventer spesifikke typer "flex" og "column", men uten ekstra arbeid mottar det string for begge, som er for vid og ikke beskrivende. Du kan se den samme feilen skje her:

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

Det finnes noen få løsninger her. Jeg tror den mest elegante er as const, så det vil behandle objektverdiene dine som deres spesifikke litterale typer. Sørg også for at TS-versjonen din er oppdatert for å bruke dette.

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

Alternativt kan du erklære stilobjektene dine separat og få dem typekontrollert av CSSProperties-grensesnittet. Dette gir autofullføring på hver egenskap, men dette kan ikke (lett) gjøres som ett enkelt fullstendig objekt.

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,
}

Andre mindre ideelle løsninger:

  • { [key: string]: React.CSSProperties }: dette utfører ikke typekontroll på navnet til hver stil, så du kan gjøre styles.abcdef uten noen feil

  • Kasting av hver stil as React.CSSProperties: dette fanger ikke opp feil i selve stilene, f.eks. du kan skrive feil som display: "fleex"

Svar #2

Å definere styles-typen som vist nedenfor vil bevare typetesting på alle CSS-klassene dine og deres egenskaper:

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

Relaterte artikler