Користећи Реацт, типично је да сачувате своје стилове у глобалној ЦСС датотеци. Ово може отежати проналажење стила за одређене компоненте, посебно када радите на великом пројекту. Са стилизованим компонентама, проналажење стила за одређену компоненту је лако јер се налазе у истој датотеци као и компонента.
Хајде да видимо како да подесите и интегришете стилизоване компоненте у вашу Реацт апликацију.
Инсталирање библиотеке стилизованих компоненти
Можете да инсталирате стилизоване компоненте тако што ћете покренути ову команду у свом терминалу:
нпм и стилизоване компоненте
Да бисте инсталирали стилизоване компоненте користећи предиво, покрените:
пређе додати стилизоване компоненте
Креирање стилизоване компоненте
Стилизована компонента је као стандардна Реацт компонента, са стиловима. Има разних предности и мане стилизованих компоненти, које је важно узети у обзир за правилну употребу.
Општа синтакса изгледа овако:
увоз стилизовано из"стилизоване компоненте";
конст Име компоненте = стилизовано. ДОМЕлементТаг`
цссПроперти: цссВалуе
`
Овде увозите стилизовано од стилизована компонента библиотека. Тхе стилизовано функција је интерни метод који конвертује ЈаваСцрипт код у стварни ЦСС. Тхе ЦомпонентНаме је назив стилизоване компоненте. Тхе ДОМЕлементТаг је ХТМЛ/ЈСКС елемент који намеравате да стилизујете, као што су див, спан, дугме итд.
Да бисте креирали стилизовано дугме користећи стилизовану компоненту, прво бисте креирали Реацт компоненту која садржи елемент дугмета.
Овако:
увоз Реаговати из"реаговати";
функцијаДугме() {
повратак (
Сада можете да креирате стил за дугме користећи стилизоване компоненте:
увоз стилизовано из"стилизоване компоненте";
конст СтиледБуттон = стилед.буттон`
паддинг: 1рем 0.8рем;
радијус границе: 15пк;
боја позадине: сива;
боја: #ФФФФФФ;
величина фонта: 15пк;
`
Стављајући све заједно, мораћете да замените дугме таг витх тхе СтиледБуттон саставни део:
увоз стилизовано из"стилизоване компоненте";
увоз Реаговати из"реаговати";конст СтиледБуттон = стилед.буттон`
паддинг: 1рем 0.8рем;
радијус границе: 15пк;
боја позадине: сива;
боја: #ФФФФФФ;
величина фонта: 15пк;
`
функцијаДугме() {
повратак (Добродошли!!!</StyledButton>
)
}
Нестинг Стилес
Такође можете угнездити стилове када радите са стилизованим компонентама. Угнежђење стилизованих компоненти је нешто слично користећи САСС/СЦСС језик проширења. Можете угнездити стилове ако компонента садржи више ознака елемента и жели да стилизује сваку ознаку појединачно.
На пример:
увоз Реаговати из'реаговати';
функцијаАпликација() {
повратак (Стилизоване компоненте</h1>
Добродошли у стилед-цомпонентс</p>
</div>
)
}
Овај код креира компоненту која садржи ан х1 елемент и а стр елемент.
Можете да стилизујете ове елементе користећи функцију угнежђеног стила стилизованих компоненти:
увоз Реаговати из'реаговати';
увоз стилизовано из'стилед-цомпонентс';конст СтиледАпп = стилед.див`
боја: #333333;
тект-алигн: центар;х1 {
величина фонта: 32пк;
фонт-стиле: италиц;
фонт-веигхт: болд;
размак између слова: 1.2рем;
тект-трансформ: велика слова;
}п {
маргин-блоцк-старт: 1рем;
величина фонта: 18пк;
}
`
функцијаАпликација() {
повратак (Стилизоване компоненте</h1>
Добродошли у стилед-цомпонентс</p>
</StyledApp>
)
}
Овај код користи стилизовану компоненту и угнезди стил за х1 и стр ознаке.
Креирање и коришћење променљивих
Могућност креирања променљивих је изузетна карактеристика библиотеке стилизованих компоненти. Ова способност даје динамички стил где можете да користите ЈаваСцрипт променљиве за одређивање стилова.
Да бисте користили променљиве у стилизованим компонентама, креирајте променљиву и доделите јој вредност ЦСС својства. Затим можете користити ту променљиву директно у свом ЦСС-у, на пример:
увоз стилизовано из"стилизоване компоненте";конст МаинЦолор = "црвено";
конст Наслов = стилизовано.х1`
боја: ${МаинЦолор};
`;
функцијаАпликација() {
повратак (
<>Здраво свет!</Heading>
</>
);
}
У блоку кода изнад, текст „Здраво Свете!” ће се приказати црвеном бојом.
Имајте на уму да овај пример једноставно користи стандардну ЈаваСцрипт променљиву у литералу шаблона у комбинацији са стилизованом компонентом. То је другачији приступ од користећи ЦСС променљиве.
Проширивање стилова
Након креирања стилизоване компоненте, користићете компоненту. Можда ћете желети да направите суптилне разлике или додате више стила у неким ситуацијама. У оваквим случајевима можете проширити стилове.
Да бисте проширили стилове, умотате стилизовану компоненту у стилизован() конструктор, а затим укључите све додатне стилове.
У овом примеру, ПримариБуттон компонента наслеђује стил компоненте дугмета и додаје другу плаву боју позадине.
увоз стилизовано из"стилизоване компоненте";
увоз Реаговати из"реаговати";конст Дугме = стилизовано.дугме`
паддинг: 1рем 0.8рем;
радијус границе: 15пк;
боја позадине: сива;
боја: #ФФФФФФ;
величина фонта: 15пк;
`конст ПримариБуттон = стилизовано (дугме)`
боја позадине: плава;
`
функцијаАпликација() {
повратак (
Такође можете променити ознаку коју стилизована компонента приказује користећи као а проп.
Тхе као проп вам омогућава да наведете основни ХТМЛ/ЈСКС елемент који ће стилизована компонента приказати као.
На пример:
увоз стилизовано из"стилизоване компоненте";
увоз Реаговати из"реаговати";конст Дугме = стилизовано.дугме`
паддинг: 1рем 0.8рем;
радијус границе: 15пк;
боја позадине: сива;
боја: #ФФФФФФ;
величина фонта: 15пк;
`
функцијаАпликација() {
повратак (
Овај код приказује Дугме компонента као ан а елемент, постављање његовог хреф приписати '#'.
Креирање глобалних стилова
Компоненте са стилом су обично обухваћене компонентом, тако да се можда питате како да стилизујете апликацију као целину. Можете да стилизујете апликацију користећи глобални стил.
Стилед-Цомпонентс нуди а цреатеГлобалСтиле функција која вам омогућава да глобално декларишете стилове. Тхе цреатеГлобалСтиле уклања ограничење стила у оквиру компоненте и омогућава вам да декларишете стилове који се примењују на сваку компоненту.
Да бисте креирали глобалне стилове, увозите цреатеГлобалСтиле функцију и наведите стилове који су вам потребни.
На пример:
увоз {цреатеГлобалСтиле} из'стилед-цомпонентс';конст ГлобалСтилес = цреатеГлобалСтиле`
@увоз урл(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
маргина: 0;
паддинг: 0;
бок-сизинг: бордер-бок;
}тело {
боја позадине: #343434;
величина фонта: 15пк;
боја: #ФФФФФФ;
породица фонтова: 'Монцерат', Санс Сериф;
}
`
извозУобичајено ГлобалСтилес;
Затим увозите ГлобалСтилес компоненту у компоненту апликације и рендерујте је. Рендеринг тхе ГлобалСтилес компонента у компоненти ваше апликације ће применити стилове на вашу апликацију.
Овако:
увоз Реаговати из'реаговати';
увоз ГлобалСтилес из'./Глобал';
функцијаАпликација() {
повратак (
</div>
)
}
Више о стилизованим компонентама
Научили сте како да подесите, инсталирате и користите стилизоване компоненте у вашој Реацт апликацији. Библиотека стилизованих компоненти је ефикасан начин за стилизовање ваше Реацт апликације. Пружа многе корисне функције које омогућавају флексибилност у обликовању и динамичком обликовању.
Постоји још много стилизованих компоненти, као што су анимације, а Реацт је велики оквир са много тога да се научи осим тога.
