React компонентларини стилларлаш усуллари

React компонентларини стилларлашнинг турли хил усуллари мавжуд. Биз бу ерда уларнинг айрим асосийларини кўриб чиқамиз.

Биз қўллашимиз мумкин бўлган стандарт ёндашув - бу оддий веб-саҳифаларни стилларлашдаги каби глобал CSS дан фойдаланиш. Бу ерда биз стиллар билан ташкири умумий CSS файл яратамиз. Бундай ёндашувда, барча класс номлари глобал кўриш доирасида бўлиб, улар ўртасида зиддият келиб чиқиши мумкин. Шунингдек, бир нечта кичик CSS файлларни яратиш мумкин. Бу ёндашув катта миқёсдаги иловаларни яратишда жуда самарасиз.

Кейинги ёндашув - инлайн стилларлаш, уни қўллаш орқали биз оддий HTML даги каби CSS стилларин инлайн қилиб қўшашимиз мумкин. Бу ҳолатда биз атрибутга зарур CSS хусусиятларини ўтказган ҳолимизда style билан иш олиб борамиз. Бундай стилларлашдан фойдаланиш ёмон одат ҳисобланиб, фақат рендерлаш жараёнида динамик ҳисобланадиган стилларни қўшиш учун тавсия этилади. Бу усул алохида компонент интерфейсини тез прототиплаш учун яхши.

Биз кўриб чиқадиган кейинги бир неча усул - замонавий, оммабоп бўлиб бораётган, самарали стилларлаш усуллари. Ана шу усуллар катта миқёсдаги React иловаларини стилларлаш учун қўллаш тавсия этилади.

Уларнинг биринчиси - Styled Components кутубхонасини қўллаш, у стилларлаш учун намунавий сатрлардан фойдаланади. Бу усул бизга JS кодида оддий CSS ёзишга, унинг барча функционаллигидан фойдаланишга имкон беради.

Иккинчи усул - CSS модулларини қўллаш. Бу ҳолатда, CSS модули - бу барча класс ва анимация номлари сунгги бошида локал кўриш доирасида бўлган, яъни ундан фақат уни қўллаётган компонент ичидагина фойдаланиш мумкин бўлган CSS файлидир.

Бу сўнгги икки усулда биз класс номлари ўртасидаги зиддиятлардан қўрқмашимиз мумкин, чунки улар ягона - локал кўриш доираси концепцияси қўлланилади. Шунингдек, уларни қўллашда БЭМ методологиясига бўлган эхтиёж йўқолади.

Кейинги дарсларда биз бу ерда келтирилган барча усулларни батафсилрок кўриб чиқамиз.