Како стилизовати компоненте реаговања користећи ЦСС модуле

ЦСС модули обезбеђују начин за локални опсег имена ЦСС класа. Не морате да бринете о замени стилова када користите исто име класе.

Сазнајте како функционишу ЦСС модули, зашто би требало да их користите и како да их примените у Реацт пројекту.

Шта су ЦСС модули?

Тхе ЦСС модули док описати ЦСС модул као ЦСС датотеку чија су имена класа подразумевано локализована. То значи да можете адресирати ЦСС променљиве са истим именом у различитим ЦСС датотекама.

Класе ЦСС модула пишете као и нормалне класе. Затим компајлер генерише јединствена имена класа пре него што пошаље ЦСС претраживачу.

На пример, размотрите следећу .бтн класу у датотеци под називом стилес.модулес.цсс:

47ЕАББЕ5Б2Ц4ДФ005523Д496Ф158124107Д83Ц27

Да бисте користили ову датотеку, морате је увести у ЈаваСцрипт датотеку.

6АБ0ЕФ8686А5ЕФЕФАА93ЕБ61Д11944Ф9678ЦЦФ86

Сада, да бисте референцирали .бтн класу и учинили је доступном у елементу, користите класу као што је приказано у наставку:

ЦА69А4ЦФЦ6Ф63657ЦА2ББ7Б4Б79А89ДД7Ц20ФФЕЕ

Процес изградње ће заменити ЦСС класу јединственим именом формата као што је _стилес__бтн_118346908.

Јединственост имена класа значи да, чак и ако користите исто име класе за различите компоненте, оне се неће сукобити. Можете гарантовати већу независност кода јер можете да складиштите ЦСС стилове компоненте у једној датотеци, специфичној за ту компоненту.

Ово поједностављује отклањање грешака, посебно ако радите са више стилова. Мораћете само да пронађете ЦСС модул за одређену компоненту.

ЦСС модули вам такође омогућавају да комбинујете више класа кроз саставља кључна реч. На пример, размотрите следећу .бтн класу изнад. Можете 'проширити' ту класу у другим класама користећи цомпосес.

За дугме за слање можете имати:

541Е8301ЦЦ69ЕЦ530006ЕБ7Ц02ФЦ5Ц72Д70Е4759

Ово комбинује .бтн и .субмит класе. Такође можете саставити стилове из другог ЦСС модула овако:

Ц9854БД012Е45985Ц6Б49564АЕЕ6Е8181Ф691Е8Е

Имајте на уму да морате написати правило цомпосес пре других правила.

Како користити ЦСС модуле у Реацт-у

Како користите ЦСС модуле у Реацт-у зависи од тога како креирате Реацт апликацију.

Ако користите апликацију цреате-реацт-апп, ЦСС модули се постављају одмах. Међутим, ако ћете креирати апликацију од нуле, мораћете да конфигуришете ЦСС модуле помоћу компајлера као што је вебпацк.

Да бисте пратили овај водич, требало би да имате:

Чвор инсталиран на вашој машини.
Основно разумевање ЕС6 модула.
А басиц разумевање Реацт-а .

Креирање Реацт апликације

Да би ствари биле једноставне, можете користити цреате-реацт-апп да поставите Реацт апликацију.

Покрените ову команду за креирајте нови Реацт пројекат звани реацт-цсс-модулес:

Б0430ФД43Д946ЕДФ43Е3043ДЦЦЕ2986Е9ФБ497Д3

Ово ће генерисати нову датотеку под називом реацт-цсс-модулес са свим зависностима потребним за почетак рада са Реацт-ом.

Креирање компоненте дугмета

У овом кораку ћете креирати компоненту Буттон и ЦСС модул под називом Буттон.модуле.цсс. У фасцикли срц креирајте нову фасциклу под називом Компоненте. У тој фасцикли направите још једну фасциклу под називом Буттон. У ову фасциклу ћете додати компоненту дугмета и њене стилове.

Иди на срц/Цомпонентс/Буттон и креирајте Буттон.јс.

ЕБАБ84Д04Д8ДБ90Ц72ЕБ8Б39802А3626Д93Б909А

Затим креирајте нову датотеку под називом Буттон.модуле.цсс и додајте следеће.

Д664БА14Ф46ЕФА49Ц68ЕАД4Ф23ФЦ9177733151ЕА

Да бисте користили ову класу у компоненти дугмета, увезите је као стилове и референцирајте је у називу класе елемента дугмета овако:

1Ф680Е6Е0Б57Б175ДЕА8Д7413399559983Д03075

Ово је једноставан пример који показује како се користи једна класа. Можда ћете желети да делите стилове у различитим компонентама или чак да комбинујете класе. За ово можете користити кључну реч цомпосес као што је претходно поменуто у овом чланку.

Коришћење композиције

Прво измените компоненту дугмета следећим кодом.

ААА5Ц36ЦД9Д921993Ц00ФД3ЕФА361460ЦАЦ7АЕ17

Овај код чини компоненту Буттон динамичнијом прихватањем вредности типа као пропратног. Овај тип ће одредити име класе примењено на елемент дугмета. Дакле, ако је дугме дугме за слање, име класе ће бити „пошаљи“. Ако је „грешка“, име класе ће бити „грешка“ и тако даље.

Да бисте користили кључну реч цомпосес уместо писања свих стилова за свако дугме од нуле, додајте следеће у Буттон.модуле.цсс.

колико интернет користи иоутубе

82Ц409ФФ877432Е624Е632А43ЕАБ2АДЦ04925Б4А

У овом примеру, примарна класа и секундарна класа користе бтн класу. Радећи ово, смањујете количину кода који треба да напишете.

Ово можете напредовати још даље са екстерним ЦСС модулом који се зове цолорс.модуле.цсс , који садржи боје које се користе у апликацији. Затим бисте могли да користите овај модул у другим модулима. На пример, креирајте датотеку цолорс.модуле.цсс у корену фасцикле Цомпонентс са следећим кодом:

0БЦ6ДЦ267312Д6307Б4982Б41ФД390ЕДФЕ037А82

Сада у датотеци Буттон/Буттон.модуле.цсс, модификујте примарну и секундарну класу да користе горе наведене класе овако:

Д299ДЦФЕ9Д7Е4Ф01БА35ФФ360Д915ФЦ9215БФ517

Сасс са ЦСС модулима

Можете користити ЦСС модуле да побољшате модуларност ваше базе кода. Као пример, можете креирати једноставну ЦСС класу за компоненту дугмета и поново користити ЦСС класе кроз композицију.

Да бисте побољшали коришћење ЦСС модула, користите Сасс. Сасс—Синтацицалли Авесоме Стиле Схеетс—је ЦСС претпроцесор који пружа мноштво функција. Они укључују подршку за угнежђење, варијабле и наслеђивање који нису доступни у ЦСС-у. Са Сасс-ом можете додати сложеније функције својој апликацији.