Yksi suoraviivainen mutta hieman rajoittunut tapa lisätä tyylejä on käyttää inline-tyylejä, kuten HTML-elementeille annettavassa style-attribuutissa. Reactissa ainoa ero on, että tämän attribuutin arvo on olio, ei merkkijono. Tarkastellaan yksityiskohtia.

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

Yllä olevan esimerkin App-komponentissa on h1-elementti, jonka tyylit määritellään inline-tyyleinä style-attribuutin avulla. Tärkeimmät huomioitavat seikat inline-tyyleistä:

• Ominaisuuksien nimet, joissa on kaksi tai useampia sanaa, tulee kirjoittaa camel case (camelCase) -muodossa. Esimerkiksi CSS-ominaisuuden font-weight sijaan käytetään fontWeight;
• CSS-ominaisuuksien arvoina käytetään yleensä merkkijonoja, paitsi ominaisuuksissa, jotka odottavat pelkkää numeroa. Tästä syystä fontWeight-ominaisuudessa käytetään numeroa (700) ja fontSize-ominaisuudessa merkkijonoa (32px).

Inline-tyylit erillisenä oliona

Jotta JSX-koodi pysyy selkeänä ja helposti luettavana, inline-tyylit voidaan määritellä erillisenä JavaScript-oliona ja liittää tämä olio style-attribuuttiin. Tämä lähestymistapa parantaa komponenttien ylläpidettävyyttä ja luettavuutta.

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

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

Tässä esimerkissä esitellään appStyles-olio, joka sisältää samat tyylit kuin aiemmin, mutta nyt erillisenä oliona. Tämä vastuiden erottelu selkeyttää komponenttikoodia.