В продължение на години разработчиците на React са импортирали таблици със стилове в своите .jsили .jsx файлове. Проста и стандартна практика, нали?

Това е достатъчно прост първоначално генериран App.js файл с „create-react-app“. На теория проект, който изглежда така, не изглежда толкова смущаващ за работа. По дяволите, какво не е наред с използването на декларативни семантични html елементи и имена на класове, за да ги украсите с CSS в този сценарий?

Очевидно нашите приложения никога не са толкова прости.

Следващото обяснява защо силно подкрепям използването на „стилизирани компоненти“.

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

С нарастването на вашето приложение React расте и необходимостта от таблици със стилове за стилизиране на компонентите, които го съставят. Проект, който има шепа стилови таблици, е добре да се поддържа, ако работите сами. Дори и така, при групово усилие, шепа стилови таблици са изпълними.

Но какво се случва, когато нуждата от таблици със стилове расте и расте?

В крайна сметка създаваме повече имена на класове и сложни имена на класове, които се използват заедно за стилизиране на елементи условно въз основа на състоянието на компонента. Понякога използваме библиотеки като material и трябва да заменим стила на компонент (т.е. Card).

Можем да насочим името на класа на картата на материала MuiPaper-rootи да приложим стила отгоре с помощта на !important. Но възниква въпросът... дали имаме нужда от неперсонализирания компонент другаде в дъщерен компонент към родителския компонент, импортиращ този отменен стил, как тогава да сме сигурни, че получаваме оригиналния компонент, недокоснат от нашия собствен CSS?

Всички в някакъв момент сме се сблъсквали със стилове, които се заменят един друг на грешни места в грешно време, подпомагайки проблема с повече имена на класове като идентификатор, допълнително правейки нашите CSS файлове по-големи.

TLDR: Нуждаем се от нашите стилове на компоненти, за да бъдат управляеми за други разработчици, разбираеми с един поглед и локализирани там, където са ни необходими.

В горния пример, използвайки styled, можем да стилизираме целевия атрибут в компонента Card и да локализираме този стил. Оригиналният компонент на картата беше оставен непроменен, както е предвидено.

Можете ли да си представите, ако стилизирахме името на класаMuiPaper-rootв CSS файл и го импортирахме на най-високо ниво?

Заобиколно решение за използването на styled би било типичният начин за добавяне на атрибут на име на клас към компонента Card, за да го стилизирате. Това работи добре, но в действителност не всички компоненти, които можете да използвате, позволяват наследяване на имена на класове. И дори да е така, предпочитате ли да попълните своя CSS с куп имена на класове за всеки възможен вариант на компонент или да направите ясно дефинирани компоненти, които могат да се използват многократно с локализирани стилове?

Изборът е ваш!

Сближаване на състоянието на компонента със стила

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

Доста основно поведение, което бихме искали във всяко от нашите приложения (колкото и грозно да е изпълнението по-горе). За да постигнем това, можем по желание да приложим име на клас към входа, тъй като състоянието на стойността се актуализира. Може би дори бихме могли да използваме подложката за вграден стил на вход и да приложим този троичен стил, зададен там.

Има ли по-добър начин? Бих предложил следното да е много по-чисто и лесно за работа.

В рамките на стилизиран компонент можем да получим достъп до всеки от пропсовете, предадени на компонента, където и да се използва. Бих искал да отделите малко време, за да си представите сложен (по отношение на стила) компонент, който има множество аспекти, които трябва да реагират на различни подпори, които му се подават. Използвайки стилизиран компонент, можем да създадем чисто разделяне на стила на компонента и неговата логика.

TLDR: Оставете екземпляра на компонента да работи и стилизирания клас да се справи с това, което трябва да се случи стилистично.

Не е ли това по-добре от незадължителното прилагане на имена на класове или работа директно в рамките на проп стиловете?

React Native съвместимост

Това е доста кратка причина да започнете да използвате styled — може да се използва и с React Native!

Тази добра стара поговорка „Научете веднъж, пишете навсякъде“ с React и React Native може да бъде разширена до стилистичния аспект на вашите приложения, както и с помощта на styled.

Вграден в Sass

Значи обичаш Сас, а? Добри новини, стилът поддържа Sass. Може би сте забелязали в първия пример, където стилизирахме компонента Card от материал, използвах синтаксиса на Sass, за да избера името на класа MuiPaper-root в компонента, към което директно да насоча стиловете си.

Идеалното CSS-in-JS изживяване е тук. Да видим друг пример!

Можем да се възползваме от всички готини неща, които Sass може да ни предложи вкъщи за оформяне. Доста спретнато, а?

Но какво ще кажете за глобалните CSS променливи?

Така че казвате, че можем да използваме Sass в нашите стилизирани компоненти, но какво да кажем за използването на добрите стари глобални променливи? Тъй като стилът позволява изолирани компоненти, какво ще кажете за тези глобални многократно използвани цветове, икони, шрифтове и т.н.?

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

Нека редактираме файла App.css тук, който имам:

Резултатът от това е следният:

Като проверим стилизираното h1 в нашата конзола за разработчици, можем да видим успешно приложената CSS променлива.

Тук е добър момент да споменем също, че styled управлява имената на класове вътрешно за себе си, които се визуализират, за да се избегнат конфликтни имена на класове.

В заключение…

Това е страхотен инструмент за използване във вашите приложения на React, както родни, така и уеб базирани. Не разгледах синтаксиса тук много повече от примери, но ще публикувам статия в бъдеще, за да го направя. За момента можете да посетите https://styled-components.com/ за обучение!

Приятен стайлинг, приятели.