React ei pakota käyttämään yhtä tiettyä tapaa komponenttien tyylittelyyn. Sen sijaan se antaa joustavuutta valita, miten tyylejä sovelletaan projektin tarpeiden mukaan.

Reactin tyylittely perustuu edelleen CSS:ään. Erona on se, miten tyylit järjestetään ja liitetään komponentteihin.

Tällä kurssilla keskitytään kahteen keskeiseen tyylittelytapaan:

• Sisäiset tyylit: tyylit määritellään suoraan elementeille style-attribuutin ja JavaScript-olioiden avulla;
• Ulkoiset CSS-tiedostot: tyylit kirjoitetaan perinteisiin CSS-tiedostoihin ja liitetään luokkanimien avulla.

Tyylittely kirjastoilla ja kehyksillä

Käytännön projekteissa React-sovellukset tyylitellään usein kolmannen osapuolen kirjastoilla ja kehyksillä. Suosittuja vaihtoehtoja ovat:

• CSS Modules;
• Styled Components;
• Emotion;
• Tailwind CSS;
• Material UI (MUI);
• Chakra UI.

Nämä työkalut tarjoavat edistyneitä ominaisuuksia, kuten rajatut tyylit, design-järjestelmät ja utiliteettipohjaisen tyylittelyn.

Miksi emme käsittele niitä tässä

Vaikka tyylikirjastot ovat tehokkaita, ne lisäävät lisäkompleksisuutta ja tuovat mukanaan uusia käsitteitä Reactin perusteiden lisäksi. Tämän kurssin tavoitteena on rakentaa vahva perusta, ymmärtää miten React-komponentit toimivat ja välttää tarpeettomia häiriötekijöitä alkuvaiheessa.