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

Користећи стилизоване компоненте, можете одржавати архитектуру вођену компонентама коју Реацт већ појачава. Али библиотека има и неке недостатке.

Како функционишу стилизоване компоненте

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

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

конст Наслов = стилизовано.х1`
фонт-сизе: 1.5ем;
 тект-алигн: центар;
 боја црвена;
`;

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

конст Почетна = () => {
повратак (
<Наслов>Стилизовани наслов компоненте</Title>
	)
}

Такође је веома моћан јер олакшава рад са реквизитима и стањем.

На пример, боја и позадина ове компоненте зависе од реквизита.

увоз стилизовано из "стилед-цомпонентс";
конст Дугме = стилизовано.дугме`
паддинг: 0.8рем 1.6рем;
 боја позадине: ${(пропс) => (реквизити.примарни? "љубичаста": "бео")};
 граница: 1пк солид #00000;
 боја: ${(реквизити) => (реквизити.примарни? "бео": "љубичаста")};
`;
извозУобичајенофункцијаКућа() {
 повратак <Дугме примарно>Примарни</Button>
}

Са стилизованим компонентама, не морате ручно да прослеђујете реквизите у ЦСС. Аутоматски је доступан, поједностављујући стилове писања који зависе од података из компоненте.

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

Ево неких предности коришћења библиотеке стилизованих компоненти.

Решава проблеме специфичности ЦСС-а

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

Омогућава вам да пишете ЦСС унутар компоненти

Као што се види из примера компоненте дугмета, стилед-цомпонентс вам омогућава да комбинујете ЦСС и ЈС у истој датотеци. Дакле, не морате да креирате засебну ЦСС датотеку или да наставите да прелазите са датотеке на датотеку.

Ово је огромна предност при креирању УИ комплета јер све функције компоненти чувате у једној датотеци.

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

Омогућава проверу типа

Са стилизованим компонентама, можете да проверите куцање реквизита и вредности које се користе у вашим стиловима. На пример, можете да препишете горњу компоненту дугмета користећи ТипеСцрипт.

интерфејсреквизити{
 Примарни: боолеан
}
цонст Дугме = стилизовано.дугме<реквизити>`
паддинг: 0.8рем 1.6рем;
 боја позадине: ${(пропс) => (реквизити.примарни? "љубичаста": "бео")};
 граница: 1пк солид #00000;
 боја: ${(реквизити) => (реквизити.примарни? "бео": "љубичаста")};
`;

Коришћење ТипеСцрипт-а у компоненти значи проверу грешака у типу док кодирате и смањење времена за отклањање грешака.

Подржава Тхеминг Оут оф тхе Бок

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

конст Дугме = стилизовано.главно`
 боја позадине: ${пропс => пропс.тхеме.лигхт.бацкгроунд};
 боја: ${пропс => пропс.тхеме.лигхт.фонтЦолор};
`
<ТхемеПровидер тхеме={тхеме}>
<Дугме>
 Дугме за светло
</Button>
</ThemeProvider>

Компонента ТхемеПровидер прослеђује теме свим стилизованим компонентама које обмотава. Ове компоненте затим могу да користе вредности теме у својим стиловима. У овом примеру, дугме користи вредности теме за боје позадине и фонта.

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

Иако коришћење библиотеке стилизованих компоненти има многе предности, има и недостатке.

Није независно од оквира

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

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

Може бити тешко читати

Разликовање између стилизованих и Реацт компоненти може бити тешко, посебно ван система атомског дизајна. Размотрите овај пример:

<Главни>
<Нав>
<Листа ствари>
<ЛинкТект>Усвојите кућног љубимца</LinkText>
</ListItem>
<Листа ствари>
<ЛинкТект>Донирајте</LinkText>
</ListItem>
</Nav>
<Хеадер>Усвоји, дон'т схоп!</Header>
<СецондариБтн бтнТект="Донирајте" />
</Main>

Једини начин да сазнате која компонента садржи пословну логику је провера да ли има реквизите. Штавише, иако су имена компоненти у овом примеру описна, и даље их је тешко визуализовати.

На пример, компонента заглавља може бити наслов, али ако не проверите стилове, можда никада нећете знати да ли је то х1, х2 или х3.

Неки програмери решавају овај проблем тако што само користе стилизовану компоненту као омотач и користе семантичке ХТМЛ ознаке за елементе унутар ње.

У овом примеру, компонента заглавља може да користи ознаку х1.

<х1>Усвоји, дон'т схоп!</h1>

Ово можете напредовати тако што ћете дефинисати стилизоване компоненте у другој датотеци (нпр. стилед.јс), коју касније можете да увезете у Реацт компоненту.

увоз * као Стилед из './стилед'
// користи стилед.цомпонентс
<стилизовано. Главни>
// цоде
</styled.Main>

Ово вам даје јасан увид у то које су компоненте стилизоване, а које су Реацт компоненте.

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

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

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

Када користити стилизоване компоненте

Неки програмери уживају у писању ЦСС-а у ЈС датотекама, док други више воле да имају засебне ЦСС датотеке. Начин на који ћете се одлучити за писање ЦСС-а на крају треба да зависи од самог пројекта и шта волите ви или ваш тим. Компоненте са стилом су добар избор за прављење УИ библиотеке јер све може бити у једној датотеци и лако се извози и поново користи.

Ако више волите да пишете чисти ЦСС, користите ЦСС модуле. Можете имати одвојене ЦСС датотеке и он подразумевано одређује стилове локално. Без обзира на то који избор направите, поседовање солидног ЦСС знања је од суштинског значаја.