Как стилизовать компоненты React с помощью CSS

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

Для небольших проектов вы можете удобно стилизовать свое приложение, используя встроенные стили , модули или самостоятельно написав спецификации className . А для динамических проектов, таких как приложения, лучше использовать библиотеку, которая позволяет легко реализовывать свойства.

В качестве альтернативы вы можете использовать набор утилит, такой как Tailwind UI, который поставляется с готовыми стилями. Если вам нужно отрендерить макет или презентацию, наборы пользовательского интерфейса для React — это то, что вам нужно.

Практичный стиль с className

В React практические стили CSS применяются через свойство className .

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

Давайте посмотрим на пример.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

И это будет результат:

Это полностью действующая ванильная техника. И чаще всего используется для объявления глобальных переменных, которые вы будете повторно использовать в основных компонентах.

Единственное предостережение заключается в том, что по мере роста вашего проекта растет и вероятность конфликтов имен.

Точно так же стоимость управления сотнями таблиц стилей абсурдно высока.

Использование JSX для встроенных стилей

React позволяет стилизовать элементы DOM с помощью встроенных стилей. Хотя логика CSS остается прежней, сам стиль должен проходить через JavaScript. Это также известно как JSX.

Давайте посмотрим на пример:

Заголовок.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Одна вещь, которую вы заметите, это то, что вместо line-height мы используем lineHeight .

Объяснение этому таково: «Поскольку JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именах свойств в camelCase вместо имен атрибутов HTML». .

Встроенные стили обычно используются для демонстрации примеров, а также для добавления динамического стиля к определенным элементам. Более того, встроенные стили не поддерживают псевдоэлементы или медиа-запросы, поскольку вы можете передавать только style . Использование таблицы стилей является лучшей альтернативой.

Создание локальной области видимости с помощью модулей CSS

Если вы хотите применить пользовательские стили к компонентам без именования коллизий, один из способов сделать это — использовать модули CSS.

Это подход, при котором вы можете применить локальную область действия к каждому компоненту отдельно.

Вот так:

Заголовок.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Заголовок.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

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

 .header { composes: header from './style.css'; }

CSS в JS

В отличие от таких фреймворков, как Vue и Svelte, React не предоставляет собственного интерфейса стилей.

Таким образом, хотя вы можете писать CSS для компонентов, используя вышеупомянутые методы, святым Граалем является использование CSS в библиотеках JS. У каждой библиотеки есть свои сильные и слабые стороны, но в целом преимущества остаются прежними:

• Реквизит для различных стилевых вариаций.
• Доступная тематика.
• Область видимости стиля на основе компонентов.
• Динамические переменные CSS с использованием функций JavaScript.

Самое популярное решение для CSS в JS — Styled Components.

И другие известные варианты включают Emotion и Linaria. Для демонстрации давайте посмотрим, как CSS интегрируется в компонент React с помощью библиотеки Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Во-первых, мы создаем новый компонент с именем HeaderWrapper , который будет отображать контейнер <section> для нашего заголовка заголовка. Затем мы создаем еще один компонент с именем HeaderTitle и передаем ему переменные CSS. Так что в некотором смысле это то же самое, что и работа с веб-компонентами, только в контексте React.

Использование CSS-фреймворка

Дело не в том, что все во внешнем интерфейсе движется в сторону фреймворков и библиотек.

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

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Таким образом, вместо того, чтобы определять стиль компонента с помощью констант , мы можем напрямую написать стиль, указанный фреймворком. Подобный метод чрезвычайно эффективен, и вы можете, например, импортировать компоненты пользовательского интерфейса (например, карточки), созданные другими.

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

Использование библиотеки пользовательского интерфейса

Последний метод стилизации компонентов React — использование библиотеки пользовательского интерфейса. В отличие от фреймворка, библиотека пользовательского интерфейса следует рекомендациям по стилю. Так что, во многих отношениях, стиль уже предопределен. Например, Mantine и Material UI — одни из лучших вариантов.

Единственным «недостатком» является то, что вам придется потратить немало времени на изучение этой конкретной библиотеки. Но то же самое можно сказать и о фреймворках. Несмотря на входной барьер, и CSS-фреймворки, и библиотеки пользовательского интерфейса являются золотым стандартом стилизации компонентов React.