Tyylivaihtoehdot Reactissa

React ei pakota käyttämään yhtä tiettyä tapaa komponenttien tyylittelyyn. Sen sijaan se tarjoaa 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 kirjastoilla ja kehyksillä

Todellisissa 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 rajattuja tyylejä, design-järjestelmiä ja utiliteettipohjaista tyylittelyä.

Miksi emme käsittele niitä tässä

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