Tyylivaihtoehdot Reactissa

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 lisätään suoraan elementteihin käyttämällä style-attribuuttia ja JavaScript-olioita;
• Ulkoiset CSS-tiedostot: tyylit kirjoitetaan perinteisiin CSS-tiedostoihin ja liitetään luokkanimien avulla.

Tyylittely kirjastojen ja kehysten avulla

Käytännön projekteissa React-sovellukset tyylitellään usein kolmannen osapuolen kirjastojen ja kehysten avulla. 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 tuovat mukanaan lisäkompleksisuutta ja esittelevät 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.