Een eenvoudige maar enigszins beperkte methode om stijlen toe te voegen is het gebruik van inline stijlen, vergelijkbaar met het toepassen van stijlen op HTML-elementen via het style-attribuut. In React is het enige verschil dat de waarde voor dit attribuut een object is in plaats van een string. Laten we de details bekijken.

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

De App-component in het bovenstaande voorbeeld bevat een h1-element met inline stijlen die zijn gedefinieerd via het style-attribuut. Belangrijke aandachtspunten bij inline stijlen:

• Eigenschapsnamen met twee of meer woorden moeten de camel case (camelCase) notatie volgen. In plaats van de CSS-eigenschap font-weight wordt bijvoorbeeld fontWeight gebruikt;
• Bij het toekennen van waarden aan CSS-eigenschappen worden doorgaans strings gebruikt, behalve voor eigenschappen die een getal verwachten. Daarom gebruikt de eigenschap fontWeight een getal (700) als waarde, terwijl de eigenschap fontSize een stringwaarde (32px) gebruikt.

Inline stijlen als een apart object

Om onze JSX-code overzichtelijk en gefocust te houden, kunnen we de inline stijlen definiëren als een apart JavaScript-object en dat object vervolgens toewijzen aan het style-attribuut. Deze aanpak verbetert het onderhoud en de leesbaarheid van onze componenten.

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

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

In dit voorbeeld introduceren we het appStyles-object, dat dezelfde stijlen bevat als eerder, maar nu als een apart object. Deze scheiding van verantwoordelijkheden verhoogt de duidelijkheid van onze componentcode.