En enkel måde at anvende styles i React på er ved at bruge inline styles, hvilket ligner den måde, styles tilføjes til HTML-elementer med style attributten.

Den væsentligste forskel er, at i React er værdien af style attributten et JavaScript-objekt og ikke en CSS-streng.

Her er et eksempel på, hvordan inline styles anvendes direkte i JSX:

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

I dette eksempel modtager h1-elementet styles gennem style attributten, som indeholder et JavaScript-objekt.

Vigtige regler for inline styles

Ved brug af inline styles i React skal følgende regler overholdes:

• CSS-egenskabsnavne med to eller flere ord skal skrives med camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Værdier skrives som regel som strenge: "32px", "red", "rebeccapurple";
• Nogle egenskaber kan modtage tal direkte: fontWeight: 700.

Disse regler gælder, fordi inline styles skrives i JavaScript og ikke i almindelig CSS.

Inline styles som et separat objekt

For at gøre JSX mere overskuelig og letlæselig kan inline styles gemmes i et separat JavaScript-objekt og derefter videregives til style attributten.

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

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

Hvornår skal man bruge inline-stilarter

Inline-stilarter fungerer bedst til:

• Små komponenter;
• Dynamiske stilarter;
• Hurtige visuelle justeringer.

De er ikke ideelle til store layouts eller kompleks styling, hvilket er grunden til, at ekstern CSS ofte foretrækkes.