Стилизирање ваше Реацт.јс апликације помоћу Емотион-а

Обликовање Реацт апликације може бити изазовно, посебно ако желите да своје стилове одржите организованим и одржаваним. Да би се поједноставио овај процес, библиотека Емотион пружа апстракцију вишег нивоа на врху ЦСС-а.

Шта је емоција?

Емотион је библиотека за стилизовање Реацт апликација која пружа једноставан и ефикасан начин управљања вашим стиловима. Омогућава вам да пишете ЦСС у ЈаваСцрипт-у и пружа флексибилан АПИ за стилизовање ваших компоненти.

Једна од главних предности коришћења Емотион-а за стилизовање ваше Реацт апликације је то што пружа ефикаснији начин управљања вашим стиловима. На пример, можете користити идентична имена класа у више компоненти без ризика од сукоба имена који се јављају када радите са ЦСС/САСС.

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

Како инсталирати Емотион

Да бисте додали библиотеку Емотион у вашу Реацт апликацију, покрените следећу наредбу терминала:

нпм инсталл --саве @емотион/реацт

Библиотека Емотион би сада требало да буде инсталирана у ваш пројекат и спремна за употребу за стилизовање ваше Реацт апликације.

Стилизирање помоћу Емотион-овог цсс Проп

Када инсталирате библиотеку Емотион, моћи ћете да користите цсс проп за стилизовање ваше Реацт апликације. Тхе цсс проп је сличан стиле пропу јер му можете проследити стилове у облику стрингова или регуларних ЈаваСцрипт објеката.

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

/** @јскИмпортСоурце @емотион/реаговати */
увоз Реаговати из'реаговати';
увоз {цсс} из'@емоција/реаговати';
функцијаАпликација() {
повратак (
 паддинг: 0.5рем 1рем;
 граница: нема;
 фонт-фамили: цурсиве;
 радијус границе: 12пк;
 боја: #333333;
 боја позадине: наследити;
 маргин-блоцк-старт: 2рем;
 маргин-блоцк-енд: 2рем;
`}>
 Кликни ме
 </button>
 )
}
извозУобичајено Апликација;

Први ред кода, /** @јскИмпортСоурце @емотион/реацт */, је посебан коментар који треба да додате у ЈСКС датотеку да бисте назначили да Емотион библиотека треба да се користи као ЈСКС прагма за ту датотеку.

У ЈСКС-у, прагма је функција која трансформише ЈСКС синтаксу у обичан ЈаваСцрипт. Подразумевано, Реацт користи Реацт.цреатеЕлемент функционише као ЈСКС прагма. Међутим, са @јскИмпортСоурце коментар, можете одредити другу прагму.

У овом случају, @емоција/реаговати прагма каже ЈСКС-у да користи јск функција из Емотион библиотеке за трансформацију ЈСКС кода. Додавањем прагма коментара у ЈСКС датотеку, можете користити функције ЦСС-ин-ЈС библиотеке Емотион у својим компонентама.

Компонента дугмета приказује дугме са неким прилагођеним стилом. Ево, цсс проп додаје прилагођени стил елементу дугмета.

Тхе цсс проп такође подржава угнежђени стил. Угнежђени стил вам омогућава да пишете стилове који су угнежђени један у другом.

На пример:

/** @јскИмпортСоурце @емотион/реаговати */
увоз Реаговати из'реаговати';
увоз {цсс} из'@емоција/реаговати';
функцијаАпликација() {
повратак (
 паддинг: 0.5рем 1рем;
 граница: нема;
 фонт-фамили: цурсиве;
 радијус границе: 12пк;
 боја: #333333;
 боја позадине: наследити;
 маргин-блоцк-старт: 2рем;
 маргин-блоцк-енд: 2рем;
 &:лебдети{
 боја: #е2е2е2;
 боја позадине: #333333;
 }
`}>
 Кликни ме
 </button>
 )
}
извозУобичајено Апликација;

У овом примеру, декларација стила лебдења користи функцију угнежђеног стила цсс проп. Боја позадине и фонта у блоку кода изнад ће се променити сваки пут када пређете курсором преко дугмета.

Прослеђивање стилова објеката у цсс проп

Тхе цсс проп такође прихвата стандардне ЈаваСцрипт стилове објеката. Када стилизујете неколико компоненти, коришћење стилова објеката вам омогућава да поново користите стилове у својим компонентама.

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

конст стил = {
 паддинг: '0.5рем 1рем',
 граница: 'ниједан',
 породица фонтова: 'курзив',
 бордерРадиус: '12пк',
 боја: '#333333',
 боја позадине: 'наследити',
 маргинБлоцкСтарт: '2рем',
 маргинБлоцкЕнд: '2рем',
'&:лебдети': {
 боја: '#е2е2е2',
 боја позадине: '#333333',
 }
}
повратак (
"апликација">
Кликните на Ме</button>
 </div>
);

Имајте на уму да су имена ЦСС својстава цамелЦасед уместо цртица. То је зато што су стилови дефинисани као ЈаваСцрипт објекти, који користе конвенције именовања ЦамелЦасе.

Стилизовање коришћењем стилизованих компоненти

Библиотека Емотион такође користи стилизоване компоненте када стилизује Реацт апликације. Коришћење стилизованих компоненти је сличан компонентама Реацт-а, осим што садрже стилове из кутије. Да бисте креирали стилизоване компоненте, користићете стилизовано функција.

Тхе стилизовано функција вам омогућава да креирате стилизоване компоненте за вишекратну употребу. Да бисте користили стилизовано функцију, увезите је из емоција/стил библиотека.

Да бисте добили @емотион/стилед библиотеку у вашој апликацији, инсталираћете је у свој пројекат. То можете учинити тако што ћете покренути следећу команду у терминалу вашег пројекта:

нпм инсталл @емотион/стилед

Након инсталирања @емотион/стилед библиотека, увоз стилизовано функција и дефиниши своје стилове:

увоз стилизовано из„@емотион/стилед“;
конст Дугме = стилед.буттон({
 паддинг: '0.5рем 1рем',
 граница: 'ниједан',
 породица фонтова: 'курзив',
 бордерРадиус: '12пк',
 боја: '#333333',
 боја позадине: 'наследити',
 маргинБлоцкСтарт: '2рем',
 маргинБлоцкЕнд: '2рем',
'&:лебдети': {
 боја: '#е2е2е2',
 боја позадине: '#333333',
 }
})
извозУобичајено Буттон;

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

Овако:

увоз Реаговати из'реаговати';
увоз Дугме из'./Дугме';
функцијаАпликација() {
повратак (



Кликните на Ме</Button>
 </div>
 );
}

извозУобичајено Апликација;

Рендеринг тхе Апликација компонента ће приказати дугме са стиловима дефинисаним у Дугме компоненту на екрану.

Тхе стилизовано функција такође прихвата стилове стрингова. Изгледа другачије од приступа стиловима објеката, али функционише слично.

увоз стилизовано из„@емотион/стилед“;
конст Дугме = стилизовано.дугме`
 паддинг: 0.5рем 1рем;
 граница: нема;
 фонт-фамили: цурсиве;
 радијус границе: 12пк;
 боја: #333333;
 боја позадине: наследити;
 маргин-блоцк-старт: 2рем;
 маргин-блоцк-енд: 2рем;
 &:лебдети {
 боја: #е2е2е2;
 боја позадине: #333333;
 }
`
извозУобичајено Буттон;

Ефикасан стил са емоцијама

Емотион је моћна библиотека за стилизовање Реацт компоненти која пружа једноставан и ефикасан начин управљања вашим стиловима. Било да сте почетник или искусан програмер, Емотион може помоћи да се поједностави процес стилизовања ваше Реацт апликације и олакша одржавање и скалирање вашег кода.

Дакле, ако тражите ефикаснији и флексибилнији начин за стилизовање ваших Реацт компоненти, размислите о Емотион-у.