Using Inline Styles in React

Yksi yksinkertainen tapa lisätä tyylejä Reactissa on käyttää inline-tyylejä, samalla tavalla kuin HTML-elementeille lisätään tyylejä style-attribuutilla.

Tärkein ero on, että Reactissa style-attribuutin arvo on JavaScript-olio, ei CSS-merkkijono.

Tässä esimerkki inline-tyylien käytöstä suoraan JSX:ssä:

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

Tässä esimerkissä h1-elementti saa tyylinsä style-attribuutin kautta, joka sisältää JavaScript-olion.

Inline-tyylien tärkeät säännöt

Kun käytät inline-tyylejä Reactissa, huomioi seuraavat säännöt:

• CSS-ominaisuuksien nimet, joissa on kaksi tai useampia sanaa, kirjoitetaan camelCase-muodossa
  • font-weight → fontWeight;
  • background-color → backgroundColor.
• Arvot kirjoitetaan yleensä merkkijonoina: "32px", "red", "rebeccapurple";
• Jotkin ominaisuudet voivat hyväksyä numerot suoraan: fontWeight: 700.

Nämä säännöt johtuvat siitä, että inline-tyylit kirjoitetaan JavaScriptillä, eivät tavallisella CSS:llä.

Inline-tyylit erillisenä oliona

Jotta JSX pysyy selkeämpänä ja helpommin luettavana, inline-tyylit voidaan tallentaa erilliseen JavaScript-olioon ja välittää sitten style-attribuutille.

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

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

Milloin käyttää sisäisiä tyylejä

Sisäiset tyylit sopivat parhaiten:

• Pienille komponenteille;
• Dynaamisille tyyleille;
• Nopea visuaalinen hienosäätö.

Ne eivät sovellu suurille asetteluille tai monimutkaisille tyyleille, minkä vuoksi ulkoista CSS:ää suositaan usein.