En enkel, men noget begrænset metode til at tilføje styles er brugen af inline styles, svarende til hvordan vi anvender styles på HTML-elementer med attributten style. I React er den eneste forskel, at værdien for denne attribut er et objekt, ikke en streng. Lad os se nærmere på detaljerne.

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

App-komponenten i eksemplet ovenfor indeholder et h1-element med inline styles defineret ved brug af attributten style. Her er nogle vigtige punkter at huske om inline styles:

• Egenskabsnavne med to eller flere ord skal følge camel case (camelCase) notationen. For eksempel skal vi bruge font-weight i stedet for CSS-egenskaben fontWeight;
• Når vi tildeler værdier til CSS-egenskaber, bruger vi generelt strenge, undtagen for egenskaber der forventer rene tal. Derfor bruger fontWeight-egenskaben et tal (700) som værdi, mens fontSize-egenskaben bruger en strengværdi (32px).

Inline styles som et separat objekt

For at holde vores JSX-kode ren og overskuelig kan vi definere inline styles som et separat JavaScript-objekt og derefter tildele dette objekt til style-attributten. Denne metode forbedrer vedligeholdelsen og læsbarheden af vores komponenter.

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

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

I dette eksempel introducerer vi objektet appStyles, som repræsenterer de samme styles som før, men nu som et separat objekt. Denne opdeling af ansvar øger klarheden i vores komponentkode.