Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • grunnleggende
      • Hva er Aksel?
      • Kom i gang med kodepakkene
      • Kom i gang med Figma
      • Har du innspill til Aksel?
      • Versjonering i Figma
      • Logo
      • Design tokens
      • Farger
      • Brekkpunkter
      • Typografi
      • Endringslogg
      • Migrering
      • CSS import
      • Kommandolinje
      • Stylelint
      • Tailwind
      • Layout primitives
      • Nextjs
      • OverridableComponent

OverridableComponent

Oppdatert 30. april 2025Stabil

Innhold på siden

  • Hvordan bruke OverridableComponent
    • Extende komponenter
  • Styled-components

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.

Extende komponenter

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

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.

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack