ЦСС модули обезбеђују начин за локални опсег имена ЦСС класа. Не морате да бринете о замени стилова када користите исто име класе.
Сазнајте како функционишу ЦСС модули, зашто би требало да их користите и како да их примените у Реацт пројекту.
Шта су ЦСС модули?
Тхе ЦСС модули док описати ЦСС модул као ЦСС датотеку чија су имена класа подразумевано локализована. То значи да можете адресирати ЦСС променљиве са истим именом у различитим ЦСС датотекама.
Класе ЦСС модула пишете баш као и нормалне класе. Затим компајлер генерише јединствена имена класа пре него што пошаље ЦСС претраживачу.
На пример, размотрите следећу .бтн класу у датотеци под називом стилес.модулес.цсс:
.бтн {
ширина: 90пк;
висина: 40пк;
паддинг: 10пк 20пк;
}
Да бисте користили ову датотеку, морате је увести у ЈаваСцрипт датотеку.
увоз стилова из "./стилес.модуле.јс"
Сада, да бисте референцирали .бтн класу и учинили је доступном у елементу, користили бисте класу као што је приказано у наставку:
класа="стилес.бтн"
Процес изградње ће заменити ЦСС класу јединственим именом формата као што је _стилес__бтн_118346908.
Јединственост имена класа значи да, чак и ако користите исто име класе за различите компоненте, оне се неће сукобити. Можете гарантовати већу независност кода јер можете да складиштите ЦСС стилове компоненте у једној датотеци, специфичној за ту компоненту.
Ово поједностављује отклањање грешака, посебно ако радите са више стилова. Мораћете само да пронађете ЦСС модул за одређену компоненту.
ЦСС модули вам такође омогућавају да комбинујете више класа кроз саставља кључна реч. На пример, размотрите следећу .бтн класу изнад. Можете "проширити" ту класу у другим класама користећи цомпосес.
За дугме за слање можете имати:
.бтн {
/* стилови */
}
.прихвати {
сачињава: бтн;
боја позадине: зелена;
боја:#ФФФФФФ
}
Ово комбинује класе .бтн и .субмит. Такође можете саставити стилове из другог ЦСС модула овако:
.прихвати {
сачињава: примарни из "./цолорс.цсс"
боја позадине: зелена;
}
Имајте на уму да морате написати правило цомпосес пре других правила.
Како користити ЦСС модуле у Реацт-у
Како користите ЦСС модуле у Реацт-у зависи од тога како креирате Реацт апликацију.
Ако користите апликацију цреате-реацт-апп, ЦСС модули се постављају одмах. Међутим, ако ћете креирати апликацију од нуле, мораћете да конфигуришете ЦСС модуле помоћу компајлера као што је вебпацк.
Да бисте пратили овај водич, требало би да имате:
- Чвор инсталиран на вашој машини.
- Основно разумевање ЕС6 модула.
- А басиц разумевање Реацт-а.
Креирање Реацт апликације
Да би ствари биле једноставне, можете користити цреате-реацт-апп да поставите Реацт апликацију.
Покрените ову команду за креирајте нови Реацт пројекат који се називају реацт-цсс-модулес:
нпк Креирај-реацт-апп реацт-цсс-модулес
Ово ће генерисати нову датотеку под називом реацт-цсс-модулес са свим зависностима потребним за почетак рада са Реацт-ом.
Креирање компоненте дугмета
У овом кораку ћете креирати компоненту Буттон и ЦСС модул под називом Буттон.модуле.цсс. У фасцикли срц креирајте нову фасциклу под називом Компоненте. У тој фасцикли направите још једну фасциклу под називом Буттон. У ову фасциклу ћете додати компоненту дугмета и њене стилове.
Иди на срц/Цомпонентс/Буттон и креирајте Буттон.јс.
извозУобичајенофункцијаДугме() {
повратак (
<дугме>прихвати</button>
)
}
Затим креирајте нову датотеку под називом Буттон.модуле.цсс и додајте следеће.
.бтн {
ширина: 90пк;
висина: 40пк;
паддинг: 10пк 20пк;
бордер-радиус: 4пк;
граница: нема;
}
Да бисте користили ову класу у компоненти дугмета, увезите је као стилове и референцирајте је у називу класе елемента дугмета овако:
увоз стилова из "./Буттон.модуле.цсс"
извозУобичајенофункцијаДугме() {
повратак (
<дугме цлассНаме={стилес.бтн}>прихвати</button>
)
}
Ово је једноставан пример који показује како се користи једна класа. Можда ћете желети да делите стилове у различитим компонентама или чак да комбинујете класе. За ово можете користити кључну реч цомпосес као што је претходно поменуто у овом чланку.
Коришћење композиције
Прво измените компоненту дугмета следећим кодом.
увоз стилова из "./Буттон.модуле.цсс"
извозУобичајенофункцијаДугме({типе="примари", лабел="Буттон"}) {
повратак (
<дугме цлассНаме={стилес[типе]}>{етикета}</button>
)
}
Овај код чини компоненту Буттон динамичнијом тако што прихвата вредност типа као пропс. Овај тип ће одредити име класе примењено на елемент дугмета. Дакле, ако је дугме дугме за слање, име класе ће бити „пошаљи“. Ако је „грешка“, име класе ће бити „грешка“ и тако даље.
Да бисте користили кључну реч цомпосес уместо писања свих стилова за свако дугме од нуле, додајте следеће у Буттон.модуле.цсс.
.бтн {
ширина: 90пк;
висина: 40пк;
паддинг: 10пк 20пк;
бордер-радиус: 4пк;
граница: нема;
}.Примарни {
сачињава: бтн;
боја: #ФФФФФФ;
боја позадине: #6Е41Е2;
}
.секундарни {
сачињава: бтн;
боја: #6Е41Е2;
боја позадине: #ФФФФФФ;
}
У овом примеру, примарна и секундарна класа користе бтн класу. На тај начин смањујете количину кода који треба да напишете.
Ово можете напредовати још даље са екстерним ЦСС модулом који се зове цолорс.модуле.цсс, који садржи боје које се користе у апликацији. Затим можете користити овај модул у другим модулима. На пример, креирајте датотеку цолорс.модуле.цсс у корену фасцикле Цомпонентс са следећим кодом:
.примариБг {
боја позадине: #6Е41Е2
}
.сецондариБг {
боја позадине: #ФФФФФФ
}
.примариЦолор {
боја: #ФФФФФФ
}
.сецондариЦолор {
боја: #6Е41Е2
}
Сада у датотеци Буттон/Буттон.модуле.цсс, модификујте примарну и секундарну класу да користе горе наведене класе овако:
.Примарни {
сачињава: бтн;
саставља: примарнаБоја из "../цолорс.модуле.цсс";
сачињава: примарниБг из "../цолорс.модуле.цсс";
}
.секундарни {
сачињава: бтн;
саставља: секундарниБоја из "../цолорс.модуле.цсс";
сачињава: секундарниБг из "../цолорс.модуле.цсс";
}
Сасс са ЦСС модулима
Можете користити ЦСС модуле да побољшате модуларност ваше базе кода. Као пример, можете креирати једноставну ЦСС класу за компоненту дугмета и поново користити ЦСС класе кроз композицију.
Да бисте побољшали коришћење ЦСС модула, користите Сасс. Сасс—Синтацицалли Авесоме Стиле Схеетс—је ЦСС претпроцесор који пружа мноштво функција. Они укључују подршку за угнежђење, варијабле и наслеђивање који нису доступни у ЦСС-у. Са Сасс-ом можете додати сложеније функције својој апликацији.