Bruk av Inline-Stiler i React

En enkel måte å bruke stiler i React på er ved å benytte inline-stiler, på samme måte som stiler legges til HTML-elementer med style-attributtet.

Den viktigste forskjellen er at i React er verdien til style-attributtet et JavaScript-objekt, ikke en CSS-streng.

Her er et eksempel på hvordan inline-stiler kan brukes direkte i JSX:

const App = () => (
  <>
    <h1
      style={{
        fontWeight: 700,
        fontSize: "32px",
        color: "rebeccapurple",
      }}
    >
      App title
    </h1>
  </>
);

I dette eksemplet får h1-elementet stiler gjennom style-attributtet, som inneholder et JavaScript-objekt.

Viktige regler for inline-stiler

Når du bruker inline-stiler i React, bør du huske følgende regler:

• CSS-egenskaper med to eller flere ord må bruke camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Verdier skrives vanligvis som strenger: "32px", "red", "rebeccapurple";
• Noen egenskaper kan ta imot tall direkte: fontWeight: 700.

Disse reglene gjelder fordi inline-stiler skrives i JavaScript, ikke ren CSS.

Inline-stiler som et eget objekt

For å gjøre JSX mer oversiktlig og lettere å lese, kan inline-stiler lagres i et eget JavaScript-objekt og deretter sendes til style-attributtet.

const appStyles = {
  fontWeight: 700,
  fontSize: "32px",
  color: "rebeccapurple",
};

const App = () => (
  <>
    <h1 style={appStyles}>App title</h1>
  </>
);

Når bør du bruke inline-stiler

Inline-stiler egner seg best for:

• Små komponenter;
• Dynamiske stiler;
• Rask visuell justering.

De er ikke ideelle for store oppsett eller kompleks styling, og derfor foretrekkes ofte ekstern CSS.