Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

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

Нека да видим как да настроите и интегрирате стилизирани компоненти във вашето React приложение.

Инсталиране на библиотеката със стилизирани компоненти

Можете да инсталирате стилизирани компоненти, като изпълните тази команда във вашия терминал:

npm i стилизирани компоненти

За да инсталирате стилизирани компоненти с помощта на прежда, изпълнете:

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

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

Стилизираният компонент е точно като стандартен React компонент, със стилове. Има различни плюсове и минуси на стилизирани компоненти, които са важни за правилното използване.

instagram viewer

Общият синтаксис изглежда така:

импортиране стилизиран от"стилизирани-компоненти";

конст ComponentName = стилизирано. DOMElementTag`
 cssProperty: cssValue
`

Тук внасяте стилизиран от стилизиран компонент библиотека. The стилизиран е вътрешен метод, който преобразува JavaScript кода в действителен CSS. The ComponentName е името на стилизирания компонент. The DOMElementTag е HTML/JSX елементът, който възнамерявате да стилизирате, като div, span, button и т.н.

За да създадете стилизиран бутон с помощта на стилизиран компонент, първо трябва да създадете React компонент, съдържащ елемент бутон.

Така:

импортиране Реагирайте от"реагира";
функцияБутон() {
връщане (

Сега можете да създадете стил за бутона с помощта на styled-components:

импортиране стилизиран от"стилизирани-компоненти";
конст StyledButton = styled.button`
 подплата: 1рем 0.8rem;
 радиус на границата: 15px;
 цвят на фона: сив;
 цвят: #FFFFFF;
 размер на шрифта: 15px;
`

Събирайки всичко заедно, ще трябва да замените бутон етикет с StyledButton компонент:

импортиране стилизиран от"стилизирани-компоненти";
импортиране Реагирайте от"реагира";
конст StyledButton = styled.button`
 подплата: 1рем 0.8rem;
 радиус на границата: 15px;
 цвят на фона: сив;
 цвят: #FFFFFF;
 размер на шрифта: 15px;
`
функцияБутон() {
връщане (
Добре дошли!!!</StyledButton>
 )
}

Стилове на влагане

Можете също да влагате стилове, когато работите със стилизирани компоненти. Влагането на стилизирани компоненти е малко подобно използвайки SASS/SCSS Extension Language. Можете да влагате стилове, ако даден компонент съдържа множество етикети на елемент и иска да стилизира всеки етикет поотделно.

Например:

импортиране Реагирайте от"реагира";
функцияПриложение() {
връщане (


Стилизирани компоненти</h1>




Добре дошли в styled-components</p>
 </div>
 )
}

Този код създава компонент, съдържащ h1 елемент и а стр елемент.

Можете да стилизирате тези елементи, като използвате функцията за вложен стил на стилизирани компоненти:

импортиране Реагирайте от"реагира";
импортиране стилизиран от'styled-components';
конст StyledApp = styled.div`
 цвят: #333333;
 подравняване на текст: център;


 h1 {
 размер на шрифта: 32px;
 стил на шрифта: курсив;
 тегло на шрифта: удебелен;
 разстояние между буквите: 1.2rem;
 преобразуване на текст: главни букви; 
 }


 p {
 margin-block-start: 1rem;
 размер на шрифта: 18px;
 }
`
функцияПриложение() {
връщане (

Стилизирани компоненти</h1>




Добре дошли в styled-components</p>
 </StyledApp>
 )
}

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

Създаване и използване на променливи

Възможността за създаване на променливи е забележителна характеристика на библиотеката със стилизирани компоненти. Тази способност предоставя динамичен стил, където можете да използвате JavaScript променливи за определяне на стилове.

За да използвате променливи в стилизирани компоненти, създайте променлива и й присвоете стойност на свойството CSS. След това можете да използвате тази променлива директно във вашия CSS, например:

импортиране стилизиран от"стилизирани-компоненти";
конст Основен цвят = "червен";


конст Заглавие = styled.h1`
 цвят: ${MainColor};
`;
функцияПриложение() {
връщане (
 <>
Здравей свят!</Heading>
 </>
 );
}

В кодовия блок по-горе текстът „Здравей свят!” ще се покаже в червен цвят.

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

Разширяване на стилове

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

За да разширите стилове, обвивате стилизирания компонент в стилизиран() конструктор и след това включете всички допълнителни стилове.

В този пример, Основен бутон компонент наследява стила на компонента Button и добавя различен цвят на фона на синьо.

импортиране стилизиран от"стилизирани-компоненти";
импортиране Реагирайте от"реагира";
конст Бутон = styled.button`
 подплата: 1рем 0.8rem;
 радиус на границата: 15px;
 цвят на фона: сив;
 цвят: #FFFFFF;
 размер на шрифта: 15px;
`


конст PrimaryButton = стилизиран (бутон)`
 цвят на фона: син;
`
функцияПриложение() {
връщане (

Можете също да промените етикета, който стилизираният компонент изобразява, като използвате като опора.

The като prop ви позволява да посочите основния HTML/JSX елемент, който стилизираният компонент ще изобрази като.

Например:

импортиране стилизиран от"стилизирани-компоненти";
импортиране Реагирайте от"реагира";
конст Бутон = styled.button`
 подплата: 1рем 0.8rem;
 радиус на границата: 15px;
 цвят на фона: сив;
 цвят: #FFFFFF;
 размер на шрифта: 15px;
`
функцияПриложение() {
връщане (

Този код изобразява Бутон компонент като а елемент, задавайки му href атрибут към „#“.

Създаване на глобални стилове

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

Styled-Components предлага a createGlobalStyle функция, която ви позволява да декларирате стилове глобално. The createGlobalStyle премахва ограничението за стилизиране с обхват на компонент и ви позволява да декларирате стилове, които се прилагат за всеки компонент.

За да създадете глобални стилове, импортирате createGlobalStyle функция и декларирайте стиловете, които изисквате.

Например:

импортиране {createGlobalStyle} от'styled-components';
конст GlobalStyles = createGlobalStyle`
 @импортиране url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 марж: 0;
 подплата: 0;
 оразмеряване на кутията: border-box;
 }


 тяло {
 Цвят на фона: #343434;
 размер на шрифта: 15px;
 цвят: #FFFFFF;
 шрифтово семейство: "Монсерат", sans-serif; 
 }
`
износпо подразбиране GlobalStyles;

След това импортирате GlobalStyles компонент в компонента на вашето приложение и го изобразете. Изобразяване на GlobalStyles компонент в компонента на вашето приложение ще приложи стиловете към вашето приложение.

Така:

импортиране Реагирайте от"реагира";
импортиране GlobalStyles от'./Глобален';
функцияПриложение() {
връщане (



 </div>
 )
}

Още към стилизираните компоненти

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

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