Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

При использовании React ваши стили обычно сохраняются в глобальном файле CSS. Это может затруднить поиск стиля для определенных компонентов, особенно когда вы работаете над большим проектом. При использовании стилизованных компонентов найти стиль для конкретного компонента несложно, поскольку они находятся в том же файле, что и сам компонент.

Давайте посмотрим, как настроить и интегрировать стилизованные компоненты в ваше приложение React.

Установка библиотеки styled-components

Вы можете установить стилизованные компоненты, выполнив эту команду в своем терминале:

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

Чтобы установить стилизованные компоненты с помощью пряжи, запустите:

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

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

Стилизованный компонент похож на стандартный компонент React со стилями. Существуют различные плюсы и минусы стилизованных компонентов, которые важно учитывать для правильного использования.

instagram viewer

Общий синтаксис выглядит так:

Импортировать стилизованный от"стилизованные компоненты";

константа ИмяКомпонента = стиль. DOMElementTag`
 cssProperty: cssValue
`

Здесь вы импортируете стилизованный из стилизованный компонент библиотека. стилизованный function — это внутренний метод, который преобразует код JavaScript в фактический CSS. ИмяКомпонента — имя стилизованного компонента. DOMElementTag — это элемент HTML/JSX, который вы собираетесь стилизовать, например div, span, button и т. д.

Чтобы создать стилизованную кнопку с помощью стилизованного компонента, вы должны сначала создать компонент React, содержащий элемент кнопки.

Вот так:

Импортировать Реагировать от"реагировать";
функцияКнопка() {
возвращаться (

Теперь вы можете создать стиль для кнопки с помощью styled-components:

Импортировать стилизованный от"стилизованные компоненты";
константа StyledButton = стилизованная.кнопка`
 заполнение: 1бэр 0.8бэр;
 радиус границы: 15пкс;
 цвет фона: серый;
 цвет: #FFFFFF;
 размер шрифта: 15пкс;
`

Собрав все вместе, вам нужно будет заменить кнопка тег с Стильная кнопка компонент:

Импортировать стилизованный от"стилизованные компоненты";
Импортировать Реагировать от"реагировать";
константа StyledButton = стилизованная.кнопка`
 заполнение: 1бэр 0.8бэр;
 радиус границы: 15пкс;
 цвет фона: серый;
 цвет: #FFFFFF;
 размер шрифта: 15пкс;
`
функцияКнопка() {
возвращаться (
Добро пожаловать!!!</StyledButton>
 )
}

Стили вложения

Вы также можете вкладывать стили при работе со стилями компонентов. Вложенные стилизованные компоненты немного похожи с использованием языка расширений SASS/SCSS. Вы можете вкладывать стили, если компонент содержит несколько тегов элементов и требуется стилизовать каждый тег отдельно.

Например:

Импортировать Реагировать от«реагировать»;
функцияПриложение() {
возвращаться (


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




Добро пожаловать в стилизованные компоненты</p>
 </div>
 )
}

Этот код создает компонент, содержащий h1 элемент и п элемент.

Вы можете стилизовать эти элементы, используя функцию вложенного стиля стилизованных компонентов:

Импортировать Реагировать от«реагировать»;
Импортировать стилизованный от'стилизованные компоненты';
константа StyledApp = стилизованный.div`
 цвет: #333333;
 выравнивание текста: по центру;


 ч1 {
 размер шрифта: 32пкс;
 стиль шрифта: курсив;
 вес шрифта: полужирный;
 Межбуквенное расстояние: 1.2бэр;
 преобразование текста: верхний регистр; 
 }


 п {
 старт блока маржи: 1бэр;
 размер шрифта: 18пкс;
 }
`
функцияПриложение() {
возвращаться (

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




Добро пожаловать в стилизованные компоненты</p>
 </StyledApp>
 )
}

Этот код использует стилизованный компонент и вкладывает стили для h1 и п теги.

Создание и использование переменных

Возможность создавать переменные — замечательная особенность библиотеки styled-components. Эта возможность предоставляет динамические стили, где вы можете использовать переменные JavaScript для определения стилей.

Чтобы использовать переменные в styled-components, создайте переменную и присвойте ей значение свойства CSS. Затем вы можете использовать эту переменную непосредственно в своем CSS, например:

Импортировать стилизованный от"стилизованные компоненты";
константа Основной цвет = "красный";


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

В блоке кода выше текст «Привет, мир!” будет отображаться красным цветом.

Обратите внимание, что в этом примере просто используется стандартная переменная JavaScript в литерале шаблона в сочетании со стилизованным компонентом. Это отличный от с помощью CSS-переменных.

Расширение стилей

После создания стилизованного компонента вы будете использовать этот компонент. В некоторых ситуациях вы можете захотеть сделать тонкие различия или добавить больше стилей. В таких случаях вы можете расширить стили.

Чтобы расширить стили, вы обертываете стилизованный компонент в стилизованный() конструктор, а затем включите любые дополнительные стили.

В этом примере Основная кнопка Компонент наследует стиль компонента Button и добавляет другой синий цвет фона.

Импортировать стилизованный от"стилизованные компоненты";
Импортировать Реагировать от"реагировать";
константа Кнопка = стилизованная.кнопка`
 заполнение: 1бэр 0.8бэр;
 радиус границы: 15пкс;
 цвет фона: серый;
 цвет: #FFFFFF;
 размер шрифта: 15пкс;
`


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

Вы также можете изменить тег, отображаемый стилизованным компонентом, с помощью как опора.

как prop позволяет указать базовый элемент HTML/JSX, в котором будет отображаться стилизованный компонент.

Например:

Импортировать стилизованный от"стилизованные компоненты";
Импортировать Реагировать от"реагировать";
константа Кнопка = стилизованная.кнопка`
 заполнение: 1бэр 0.8бэр;
 радиус границы: 15пкс;
 цвет фона: серый;
 цвет: #FFFFFF;
 размер шрифта: 15пкс;
`
функцияПриложение() {
возвращаться (

Этот код отображает Кнопка компонент в качестве а элемент, установив его href приписывать '#'.

Создание глобальных стилей

Стилизованные компоненты обычно привязаны к компоненту, поэтому вам может быть интересно, как стилизовать приложение в целом. Вы можете стилизовать приложение, используя глобальные стили.

Styled-Components предлагает createGlobalStyle функция, позволяющая объявлять стили глобально. createGlobalStyle снимает ограничение стилей на уровне компонентов и позволяет вам объявлять стили, которые применяются к каждому компоненту.

Чтобы создать глобальные стили, вы импортируете createGlobalStyle и объявите требуемые стили.

Например:

Импортировать {createGlobalStyle} от'стилизованные компоненты';
константа Глобальные стили = создать глобальные стили`
 @Импортировать URL(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 допуск: 0;
 заполнение: 0;
 box-sizing: граница-коробка;
 }


 тело {
 фоновый цвет: #343434;
 размер шрифта: 15пкс;
 цвет: #FFFFFF;
 семейство шрифтов: 'Монтсеррат', без засечек; 
 }
`
экспортпо умолчанию глобальные стили;

Затем вы импортируете Глобальные стили компонент в компонент вашего приложения и визуализировать его. Рендеринг Глобальные стили компонент вашего приложения будет применять стили к вашему приложению.

Вот так:

Импортировать Реагировать от«реагировать»;
Импортировать Глобальные стили от'./Глобальный';
функцияПриложение() {
возвращаться (



 </div>
 )
}

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

Вы узнали, как настраивать, устанавливать и использовать стилизованные компоненты в своем приложении React. Библиотека styled-components — это эффективный способ стилизации вашего приложения React. Он предоставляет множество полезных функций, которые обеспечивают гибкость в стилизации и динамическом стиле.

Есть еще много стилизованных компонентов, таких как анимация, и React — это большой фреймворк, в котором есть чему поучиться помимо этого.