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

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

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

Styled Components — это библиотека для React и React Native для написания и управления CSS. Это решение «CSS-in-JS», то есть вы пишете CSS в файлах Javascript (в частности, в компонентах, которые являются файлами Javascript). Это чрезвычайно популярное решение для управления CSS в React: около 8 миллионов загрузок с npm в месяц и 30 тысяч звезд на Github.

Прежде чем углубляться в тему стилизованных компонентов, рекомендуется ознакомиться с React и понять его. Несколько преимуществ библиотеки стилизованных компонентов:

Установка стилизованных компонентов

Чтобы начать работу со стилизованными компонентами, вам сначала нужно установить их в свой проект:

npm install styled-components

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

import styled from 'styled-components';

И это все! Вы готовы начать работу со стилизованными компонентами.

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

Откройте существующий проект React, над которым вы работаете (или быстро создайте новый проект с помощью create-react-app), и откройте один из существующих компонентов. Здесь вы можете добавить свой первый стилизованный компонент. Теперь, когда вы импортировали styled, вот как можно начать:

// App.js
import React from 'react';
import styled from 'styled-components';
// Button component that'll render an <a> tag with some styles
const Button = styled.a` background-colour: teal; color: white; padding: 1rem 2rem;
`
const App = () => { return ( <Button>I am a button</Button> )
}
export default App;

Давайте разберем этот код:

Есть смысл?

<Button> возвращаемый внутри компонента App, выглядит как обычный компонент React. Потому что это и есть компонент React!

В нашем предыдущем примере мы создали стилизованный компонент внутри существующего компонента. Но вы также можете создать стилизованный компонент в собственном файле. Например, создайте новый файл компонента с именем Button.js и добавьте стилизованный компонент:

// Button.js
import styled from 'styled-components';
const Button = styled.a` background-colour: teal; color: white; padding: 1rem 2rem;
`
export default Button;

Button теперь работает как любой другой компонент React. Например, теперь мы можем импортировать этот компонент в файлы других компонентов:

// App.js
import React from 'react';
import styled from 'styled-components';
// import the styled component:
import Button from './Button';
const App = () => { return ( <Container> <Button>I am a button</Button> </Container> )
}
export default App;

Вот и все! Поздравляю, вы только что создали свой первый стилизованный компонент!

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

Представьте, что у вас есть компонент <Button />, и вам нужно стилизовать разные варианты этой кнопки (первичная, вторичная, предупреждение и т. д.).

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

Давайте рассмотрим пример, чтобы понять, что я имею в виду. Здесь мы отображаем два компонента Button, один со свойством primary:

// App.js
import React from 'react';
import styled from 'styled-components';
import Button from './Button';
const App = () => { return ( <> <Button>I am a button</Button> <Button primary>I am a primary button</Button> </> )
}
export default App;

А теперь внутри компонента <Button /> мы можем добавить динамические стили:

// Button.js
import styled from 'styled-components';
const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; border: 2px solid white; background: ${props => props.primary ? 'white' : 'palevioletred' } color: ${props => props.primary ? 'palevioletred' : 'white' }
`
export default Button;

Здесь происходит интерполяция функции, возвращающей значение CSS (с использованием тернарного оператора) на основе свойств. Это было довольно тяжело.

Проще говоря, по сути background: ${props => props.primary ? ‘white’ : ‘palevioletred’ } означает: если свойство primary истинно, то должен быть фон white, иначе должен быть фон palevioletred.

Подобная обработка свойства работает в некоторых случаях использования, но может стать проблемой, если у вас есть несколько свойств (например, primary, secondary, danger и т. д.), а также несколько строк CSS.

Часто имеет смысл импортировать { css } из styled-components так:

// Button.js
import styled, { css } from 'styled-components';
const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ${props => props.primary && css` background: white; color: palevioletred; `}
`
export default Button;

Это позволяет разделить динамические стили для разных свойств. Например, добавление стилей для свойства danger будет выглядеть так:

// Button.js
import styled, { css } from 'styled-components';
const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ${props => props.primary && css` background: white; color: palevioletred; `} ${props => props.danger && css` background: red; color: white; `}
`
export default Button;

Отлично! Мы неплохо продвигаемся. Как насчет того, чтобы сделать <Button /> немного более адаптивным, а?

Использование медиа-запросов, чтобы сделать стилизованные компоненты адаптивными

К счастью, сделать стилизованные компоненты адаптивными очень просто. Добавьте медиа-запросы в литерал шаблона, например:

// Button.js
import styled from 'styled-components';
const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 9rem; background: transparent; color: white; border: 2px solid white; @media (min-width: 768px) { padding: 1rem 2rem; width: 11rem; } @media (min-width: 1024px) { padding: 1.5rem 2.5rem; width: 13rem; }
`
export default Button;

Обработка состояний наведения и других псевдо-селекторов с помощью стилизованных компонентов

Как и при добавлении медиа-запросов к стилизованным компонентам, добавить псевдо-селекторы довольно просто. Например, добавление состояния наведения к компоненту <Button /> будет выглядеть так:

// Button.js
import styled from 'styled-components';
const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 9rem; background: transparent; color: white; border: 2px solid white; :hover { border-color: green; }
`
export default Button;

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

Одна из основных ментальных моделей React — это то, что вы относитесь ко всему как к компонентам. По сути, вы разбиваете интерфейс на крошечные фрагменты и собираете все вместе масштабируемым образом. Этот подход имеет множество преимуществ, но, тем не менее, обнаруживается проблема: как стилизовать части дизайна согласованно между несколькими компонентами? Или по-другому: как установить глобальные стили?

Например, вы можете захотеть:

В Styled Components есть решение для глобальных стилей с использованием функции createGlobalStyle. Сначала перейдите к компоненту, который находится наверху дерева React.

Например, если вы работаете в проекте приложения create-react-app, это будет файл App.js. Здесь вам нужно будет импортировать createGlobalStyle в свой проект и установить некоторые стили для компонента GlobalStyle (вы можете назвать этот компонент как хотите):

// App.js
import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import { Container, Nav, Content } from '../components';
const GlobalStyle = createGlobalStyle` body { margin: 0; padding: 0; background: teal; font-family: Open-Sans, Helvetica, Sans-Serif; }
`;
const App = () => { return ( <Container> <Nav /> <Content /> </Container> )
}
export default App;

При этом стили пока не будут применяться к проекту. Теперь мы должны использовать компонент GlobalStyle, чтобы применить глобальные стили для приложения. Вы делаете это, помещая компонент GlobalStyle в верхнюю часть дерева React:

// App.js
import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import { Container, Nav, Content } from '../components';
const GlobalStyle = createGlobalStyle` body { margin: 0; padding: 0; background: teal; font-family: Open-Sans, Helvetica, Sans-Serif; }
`;
const App = () => { return ( <> <GlobalStyle /> <Container> <Nav /> <Content /> </Container> </> )
}
export default App;

Заметили использование короткого синтаксиса фрагментов? Это необходимо, поскольку вы размещаете компонент <GlobalStyle /> как родственный элемент наверху дерева. И это все! Глобальный стиль теперь полностью настроен с помощью стилизованных компонентов.

Заключение

Хорошая работа, если вы добрались до конца. Мы многое рассмотрели! В частности:

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

Автор: Tom Ray

Источник: https://scalablecss.com

Редакция: Команда webformyself.