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!