Styling

Lumi-widgeten er selvstående og leverer all nødvendig CSS. Du trenger kun én import.

CSS-import

import "lumi-survey/styles.css";

Mangler CSS?

Hvis widgeten vises uten styling (ingen farger, rar layout), sjekk at CSS-importen er med. Se også Feilsøking.

style-prop

Du kan justere posisjon, farger og legge til egne CSS-klasser via style-propen:

<LumiSurveyDock
  surveyId="min-flate"
  survey={survey}
  transport={transport}
  style={{
    position: "bottom-left",
    offset: 16,
    panelBackground: "#f8fafc",
    panelBorderColor: "#e2e8f0",
    containerClassName: "min-ekstra-klasse",
  }}
/>

Tilgjengelige style-properties

Se Props-referanse → style for komplett oversikt over alle style-properties.

Theming med CSS-variabler

Widgeten bruker --lumi-* CSS custom properties for theming. Du kan overstyre disse for å tilpasse utseendet:

• Farger — --lumi-color-primary, --lumi-color-background, etc.
• Spacing — konsistente avstander via interne tokens
• Typografi — fontstørrelser og vekter