Njia za Staili za Vifaa vya React

Kuna njia nyingi tofauti za kuweka staili kwa vifaa vya React. Hapa tutachunguza baadhi ya njia za msingi.

Njia ya kawaida ambayo tunaweza kutumia, kama ilivyo kwa kuweka staili kwa kurasa za wavuti - ni kutumia CSS ya ulimwengu. Hapa tunaunda faili moja ya nje ya CSS yenye staili. Kwa kutumia njia hii, majina yote ya madarasa yako katika eneo la maonekano ya ulimwengu, jambo linaweza kusababisha migogoro kati yao. Pia unaweza kutengeneza faili nyingi ndogo za CSS. Njia hii haifai kwa kutumia katika kuunda programu kubwa zinazoweza kupanuka.

Njia inayofuata - staili ya ndani ya mstari, kuitumia, tunaweza kuongeza staili za CSS ndani ya mstari, kama ilivyofanyika kwenye HTML ya kawaida. Katika kesi hii tutafanya kazi na sifa style, tukikipitisha sifa za CSS zinazohitajika. Kutumia staili kama hiyo inachukuliwa kuwa tabia mbaya na inapendekezwa tu kwa kuongeza staili zilizohesabiwa kwa nguvu wakati wa uonyeshaji. Njia hii nzuri kwa utengenezaji wa haraka wa mwonekano wa kifaa cha mtu binafsi.

Njia mbili zifuatazo ambazo tutazichunguza - ni za kisasa, zinazopata umaarufu, njia zenye ufanisi za kuweka staili. Hizi ndizo njia ambazo zinapendekezwa kutumika kwa kuweka staili kwa programu kubwa za React zinazoweza kupanuka.

Ya kwanza kati yazo - matumizi ya maktaba ya Styled Components, ambayo inatumia kwa kuweka staili mistari ya kigezo. Njia hii inaturuhusu kuandika CSS ya kawaida katika msimbo wa JS, kwa kutumia utendaji wote wake.

Njia ya pili - matumizi ya moduli za CSS. Katika kesi hii, moduli ya CSS - ni faili ya CSS kama hiyo, ambayo kwa chaguo-msingi majina yote ya madarasa na uhuishaji yanako katika eneo la maonekano la ndani, yaani inapatikana tu ndani ya kifaa, kinachokitumia.

Katika njia hizi mbili za mwisho hatuna haja ya kuogopa migogoro kati ya majina ya madarasa, kwani yana kipekee - hutumia dhana ya eneo la maonekano la ndani. Pia wakati wa kuzitumia hakuna haja ya mbinu ya BEM.

Katika masomo yafuatayo tutachunguza njia zote zilizotajwa hapa kwa undani zaidi.