Ett enkelt men något begränsat sätt att lägga till stilar är att använda inline-stilar, liknande hur vi applicerar stilar på HTML-element med attributet style. I React är den enda skillnaden att värdet för detta attribut är ett objekt, inte en sträng. Låt oss titta närmare på detaljerna.

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

App-komponenten i exemplet ovan innehåller ett h1-element med inline-stilar definierade med attributet style. Här är några viktiga punkter att komma ihåg om inline-stilar:

• Egenskapsnamn med två eller fler ord ska använda camel case (camelCase)-notation. Till exempel, istället för att använda CSS-egenskapen font-weight, ska vi använda fontWeight;
• När vi tilldelar värden till CSS-egenskaper använder vi vanligtvis strängar, förutom för egenskaper som förväntar sig rena tal. Därför använder egenskapen fontWeight ett tal (700) som värde, medan egenskapen fontSize använder ett strängvärde (32px).

Inline-stilar i form av ett separat objekt

För att hålla vår JSX-kod ren och fokuserad kan vi definiera inline-stilar som ett separat JavaScript-objekt och sedan tilldela det objektet till attributet style. Detta tillvägagångssätt förbättrar underhållbarheten och läsbarheten för våra komponenter.

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

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

I detta exempel introducerar vi objektet appStyles, som representerar samma stilar som tidigare men nu som ett separat objekt. Denna uppdelning förbättrar tydligheten i vår komponentkod.