Een eenvoudige manier om stijlen toe te passen in React is door gebruik te maken van inline stijlen, vergelijkbaar met het toevoegen van stijlen aan HTML-elementen via het style-attribuut.

Het belangrijkste verschil is dat in React de waarde van het style-attribuut een JavaScript-object is, geen CSS-string.

Hier is een voorbeeld van het direct toepassen van inline stijlen binnen JSX:

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

In dit voorbeeld ontvangt het h1-element stijlen via het style-attribuut, dat een JavaScript-object bevat.

Belangrijke regels voor inline stijlen

Houd bij het gebruik van inline stijlen in React rekening met de volgende regels:

• CSS-eigenschapsnamen met twee of meer woorden moeten in camelCase worden geschreven
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Waarden worden meestal als strings geschreven: "32px", "red", "rebeccapurple";
• Sommige eigenschappen kunnen direct getallen accepteren: fontWeight: 700.

Deze regels zijn van toepassing omdat inline stijlen in JavaScript worden geschreven, niet in gewone CSS.

Inline stijlen als een apart object

Om JSX overzichtelijker en leesbaarder te houden, kunnen inline stijlen worden opgeslagen in een apart JavaScript-object en vervolgens worden doorgegeven aan het style-attribuut.

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

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

Wanneer inline stijlen gebruiken

Inline stijlen zijn het meest geschikt voor:

• Kleine componenten;
• Dynamische stijlen;
• Snelle visuele aanpassingen.

Ze zijn minder geschikt voor grote lay-outs of complexe styling, waardoor externe CSS vaak de voorkeur heeft.