Hvordan bruke OverridableComponent

Flere av komponentene i Aksel er implementert med OverridableComponent. Dette API-et gjør det enkelt å overstyre hvilken komponent eller tag som komponenten rendres med.

Et vanlig eksempel på dette er bruken av React.Router sin Link-komponent. Ved å bruke as-proppen kan du enkelt løse dette og beholde typedefinisjonen for props.

<Link as={Router.Link} to="/about" >About</Link>

Extende komponenter

For å få riktige props ved extension av komponenter med OverridableComponent-api, må man bruke typeof <komponentnavn>

const CustomButton = (props: React.ComponentPropsWithRef<typeof Button>) => {
  ... custom code
  <Button {...props} />
}

Styled-components

Flere CSS-in-JS-biblioteker bruker også et as-attributt for å overstyre tag eller komponent, noe som kan komplisere ting når man for eksempel bruker styled-components for å style en komponent fra designsystemet.

For styled-components, kan man bruke forwardedAs i stedet for as på komponentene.