CSS-in-JS библиотеките, подобно на стилизираните компоненти, станаха по-популярни през последните години. Те капсулират CSS до ниво компонент и ви позволяват да използвате JavaScript, за да дефинирате многократно използвани стилове.

Използвайки стилизирани компоненти, можете да поддържате управляваната от компоненти архитектура, която React вече подсилва. Но библиотеката има и някои недостатъци.

Как работят стилизираните компоненти

The стилизирани компоненти Библиотеката CSS-in-JS ви позволява да пишете CSS във вашите компонентни файлове. Неговият синтаксис е същият като CSS, така че е доста лесен за разбиране. Това е перфектна средна позиция за разработчиците на JavaScript, които са склонни да стоят далеч от чистия CSS.

За да видите как работи, разгледайте следния компонент Title, който изобразява елемент h1.

конст Заглавие = styled.h1`
размер на шрифта: 1.5em;
 подравняване на текст: център;
 цвят: червен;
`;

Можете да използвате този компонент като всеки друг компонент на React.

конст Начало = () => {
връщане (
<Заглавие>Стилизирано заглавие на компонент</Title>
	)
}
instagram viewer

Освен това е много мощен, защото улеснява работата с подпори и състояние.

Например цветът и фонът на този компонент зависят от подпорите.

импортиране стилизиран от "стилизирани-компоненти";
конст Бутон = styled.button`
подплата: 0.8rem 1.6rem;
 цвят на фона: ${(реквизити) => (реквизит.основен? "лилаво": "бяло")};
 граница: 1px твърди #00000;
 цвят: ${(реквизити) => (реквизит.основен? "бяло": "лилаво")};
`;
износпо подразбиранефункцияУ дома() {
 връщане <Основен бутон>Първичен</Button>
}

Със стилизираните компоненти не е необходимо ръчно да подавате реквизитите към CSS. Той е достъпен автоматично, опростявайки стиловете на писане, които зависят от данните от компонента.

Плюсове от използването на стилизирани компоненти

Ето някои предимства от използването на библиотеката със стилизирани компоненти.

Решава проблеми със спецификата на CSS

Стилизираните компоненти елиминират проблемите със специфичността, тъй като капсулират CSS вътре в компонент. Това означава, че не е нужно да се притеснявате, че имената на класовете се сблъскват или потребителският ви интерфейс ще се превърне в бъркотия поради сблъсъци на имена на класове.

Позволява ви да пишете CSS вътре в компоненти

Както се вижда от примера с компонента на бутона, styled-components ви позволява да комбинирате CSS и JS в един и същи файл. Така че не е необходимо да създавате отделен CSS файл или да превключвате от файл на файл.

Това е огромно предимство при създаването на UI комплекти, защото съхранявате цялата функционалност на компонентите в един файл.

Освен това, писане на CSS вътре в компоненти. Улеснява споделянето на подпори и състояния със стилове.

Позволява проверка на типа

Със стилизираните компоненти можете да проверявате типовете реквизитите и стойностите, използвани във вашите стилове. Например, можете да пренапишете компонента на бутона по-горе, като използвате TypeScript.

интерфейсреквизит{
 основен: булево
}
const Button = styled.button<реквизит>`
подплата: 0.8rem 1.6rem;
 цвят на фона: ${(реквизити) => (реквизит.основен? "лилаво": "бяло")};
 граница: 1px твърди #00000;
 цвят: ${(реквизити) => (реквизит.основен? "бяло": "лилаво")};
`;

Използване на TypeScript в компонента означава проверка на типови грешки, докато кодирате и намаляване на времето за отстраняване на грешки.

Поддържа тематизиране извън кутията

Добавяне на тъмна тема или всяка друга тема към вашето приложение може да бъде трудна и отнема много време. Стилизираните компоненти обаче опростяват процеса. Можете да добавяте теми към приложението си, като експортирате a обвиващ компонент.

конст Бутон = styled.main`
 цвят на фона: ${props => props.theme.light.background};
 цвят: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={тема}>
<Бутон>
 Светлинен бутон
</Button>
</ThemeProvider>

Компонентът ThemeProvider предава темите на всички стилизирани компоненти, които обвива. След това тези компоненти могат да използват стойностите на темата в своите стилове. В този пример бутонът използва стойностите на темата за цветовете на фона и шрифта.

Минуси от използването на стилизирани компоненти

Докато използването на библиотеката със стилизирани компоненти има много предимства, то има и недостатъци.

Не е независимо от рамката

Писането на CSS в JS означава, че разделянето на двете в бъдеще ще бъде трудно, което е ужасно за поддръжката. Например, ако някога решите да смените своя JavaScript рамка, ще трябва да пренапишете по-голямата част от кодовата си база.

Това отнема много време и е скъпо. Използвайки CSS модули или независима от рамка библиотека като emotion е по-устойчива на бъдещето.

Може да е трудно за четене

Разграничаването между стилизирани и React компоненти може да бъде трудно, особено извън система за атомен дизайн. Помислете за този пример:

<Основен>
<Навигация>
<ListItem>
<LinkText>Осиновете домашен любимец</LinkText>
</ListItem>
<ListItem>
<LinkText>Дарете</LinkText>
</ListItem>
</Nav>
<Заглавка>Осиновете, дон't магазин!</Header>
<SecondaryBtn btnText="Дарете" />
</Main>

Единственият начин да разберете кой компонент съдържа бизнес логика е като проверите дали има подпори. Освен това, въпреки че имената на компонентите в този пример са описателни, все още е трудно да ги визуализирате.

Например компонентът Header може да е заглавие, но освен ако не проверите стиловете, може никога да не разберете дали е h1, h2 или h3.

Някои разработчици решават този проблем, като използват само стилизирания компонент като обвивка и използват семантичните HTML тагове за елементите вътре в него.

В този пример компонентът на заглавката може да използва h1 таг.

<h1>Осиновете, дон't магазин!</h1>

Можете да продължите това, като дефинирате стилизираните компоненти в друг файл (напр. styled.js), който по-късно можете да импортирате в компонент на React.

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

Това ви дава ясна представа кои компоненти са стилизирани и кои са React компоненти.

Стилизираните компоненти се компилират по време на изпълнение

За приложения, които използват стилизирани компоненти, браузърът изтегля CSS и го анализира с помощта на JavaScript, преди да ги инжектира в страницата. Това причинява проблеми с производителността, тъй като потребителят трябва да изтегли много JavaScript при първоначалното зареждане.

Статичният CSS е много по-бърз. Не е необходимо да се обработва, преди браузърът да го използва за стилизиране на страници. Библиотеката със стилизирани компоненти обаче се подобрява с всяко издание. Ако можете да си позволите намалена производителност, продължете и го използвайте.

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

Някои разработчици обичат да пишат CSS в JS файлове, докато други предпочитат да имат отделни CSS файлове. Начинът, по който избирате да пишете CSS, в крайна сметка трябва да зависи от самия проект и това, което вие или вашият екип харесвате. Стилизираните компоненти са добър избор за изграждане на UI библиотека, тъй като всичко може да бъде в един файл и лесно да се експортира и използва повторно.

Ако предпочитате да пишете чист CSS, използвайте CSS модули. Можете да имате отделни CSS файлове и той локално обхваща стиловете по подразбиране. Независимо какъв избор правите, наличието на солидни познания по CSS е от съществено значение.