Ett enkelt sätt att applicera stilar i React är att använda inline-stilar, liknande hur stilar läggs till HTML-element med attributet style.

Den viktigaste skillnaden är att i React är värdet för attributet style ett JavaScript-objekt, inte en CSS-sträng.

Här är ett exempel på hur inline-stilar appliceras direkt i JSX:

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

I det här exemplet får h1-elementet stilar via attributet style, som innehåller ett JavaScript-objekt.

Viktiga regler för inline-stilar

Vid användning av inline-stilar i React, tänk på följande regler:

• CSS-egenskapsnamn med två eller fler ord måste använda camelCase
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Värden skrivs vanligtvis som strängar: "32px", "red", "rebeccapurple";
• Vissa egenskaper kan ta emot siffror direkt: fontWeight: 700.

Dessa regler finns eftersom inline-stilar skrivs i JavaScript, inte vanlig CSS.

Inline-stilar som ett separat objekt

För att hålla JSX renare och mer lättläst kan inline-stilar lagras i ett separat JavaScript-objekt och sedan skickas till attributet style.

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

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

När ska man använda inline-stilar

Inline-stilar fungerar bäst för:

• Små komponenter;
• Dynamiska stilar;
• Snabba visuella justeringar.

De är inte lämpliga för stora layouter eller komplexa stilmallar, vilket är anledningen till att extern CSS ofta föredras.