Hvordan bruke OverridableComponent
Flere av designsystemet sine komponenter er implementert med OverridableComponent
. Dette er et api som gjør det mulig å lett overstyre hvilken komponent/tag selve komponenten rendres med.
En kjent case for dette er bruk av React.Router
sin Link
-komponent. Hvis man skulle bruke denne med Designsystemet sin Link
-komponent måtte man gjort noe lignende før:
Ved å bruke as
-proppen istedenfor løses dette veldig enkelt:
Styled-components
Flere css-in-js
bibliotek brukes også en as
-prop som overstyrer tag/komponent, noe som kan komplisere ting når man bruker eks styled-components for styling av en komponent fra Designsystemet. Om du har dette problemet i eks emotion
eller lignende og har funnet en løsning, ta gjerne kontakt så legger vi det til her.
Når det kommer til en løsning for styled-components kan man bruke forwardedAs
istedenfor as
på komponentene, Styled-components fikser da resten. Dokumentasjonen om dette finnes her .
Implementasjon
For de spesielt interesserte så ligger implementasjonen på github . Hvis du ser noen forbedringer som kan gjøres, kom gjerne med en PR!