En enkel, men noe begrenset metode for å legge til stiler, er å bruke inline-stiler, på samme måte som vi bruker style-attributtet på HTML-elementer. I React er forskjellen at verdien for dette attributtet er et objekt, ikke en streng. La oss se nærmere på detaljene.

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

App-komponenten i eksempelet over inneholder et h1-element med inline-stiler definert via style-attributtet. Her er noen viktige punkter å huske om inline-stiler:

• Egenskapsnavn med to eller flere ord skal bruke camel case (camelCase)-notasjon. For eksempel, i stedet for å bruke CSS-egenskapen font-weight, skal vi bruke fontWeight;
• Når vi tildeler verdier til CSS-egenskaper, bruker vi vanligvis strenger, bortsett fra for egenskaper som forventer rene tall. Derfor bruker fontWeight-egenskapen et tall (700) som verdi, mens fontSize-egenskapen bruker en strengverdi (32px).

Inline-stiler som et separat objekt

For å holde JSX-koden ryddig og oversiktlig, kan vi definere inline-stilene som et eget JavaScript-objekt og deretter tildele dette objektet til style-attributtet. Denne tilnærmingen forbedrer vedlikeholdbarheten og lesbarheten til komponentene våre.

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

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

I dette eksempelet introduserer vi appStyles-objektet, som representerer de samme stilene som tidligere, men nå som et separat objekt. Denne separasjonen av ansvar gir bedre klarhet i komponentkoden.