Стилизация компонентов в React нужна для того, чтобы приложение было красивым. В зависимости от того, насколько простое или сложное у вас приложение, вы можете выбрать один из способов.
Способ 1. Атрибут style
Как ни странно, этот способ не является абсолютно простым, т.к. в нем нельзя указать просто строку из набора css-стилей, к которым вы, возможно, привыкли при использовании обычной html-разметки.
Для добавления стилей в React нужно записать в атрибуте style строку параметров в синтаксисе JavaScript примерно такого вида, как в примере ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from "react"; function Post(props){ return ( <div style={{ color: '#fff', backgroundColor: 'darkblue', padding: 10, textAlign: "center"}}> <h2>{props.title}</h2> <p>{props.author}</p> <p>{props.body}</p> </div>) } export default Post; |
Обратите внимание, что padding: 10 без указания 'px' (пикселей) приведет к тому, что они эти единицы измерения добавятся автоматически. Если вам нужны %, em, rem, vw, vh и т.п., их нужно указывать строкой padding: "10%".
Второй вариант указания стилей в виде атрибута style заключается в том, что мы выносим содержимое внутренних скобок в отдельный объект стилей, а уже его указываем в атрибуте style:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; const postStyle = { color: '#fff', backgroundColor: 'darkblue', padding: 10, textAlign: "center" } function Post(props){ return ( <div style={ postStyle }> <h2>{props.title}</h2> <p>{props.author}</p> <p>{props.body}</p> </div>) } export default Post; |
По сути - то же самое, но "в профиль", т.е. слегка иначе отформатированное.
Инлайн-стиль имеет свои плюсы и минусы. Плюс заключается в том, что для элементов, которые должны слегка отличаться от других, внутренний стиль не захламляет основную css-таблицу, которая может иметь приличный размер для большого приложения. Минус - это то, что инлайт-стиль имеет очень высокий приоритет, и перезаписать его через таблицу стилей нельзя. Второй минус - очень много css-кода в html-разметке.
Способ 2. Атрибут className и внешние стили
Этот способ подразумевает, что вы подключаете в папке public в файле index.html какой-то внешний файл с CDN, например, и берете все стили из него. Это годится, если вы работаете с Bootstrap, TailwindCSS или другими CSS-фреймворками. Это отличный способ для ваших тестовых проектов. Да и для рабочих, в которых верстка и css-файл уже есть, а нужно допилить функционал.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from "react"; function Post(props){ return (<div className="col-lg-3 col-sm-6 post"> <h2>{props.title}</h2> <p>{props.author}</p> <p>{props.body}</p> </div>) } export default Post; |
В общем-то, это способ, который привычен для обычного HTML+CSS.
Способ 3. Атрибут className и стили конкретного компонента
Здесь подход такой: вы создаете для компонента папку его имени, например, с именем Post. Размещаете в ней файлы index.jsx (index.js) и style.css, а затем в index.js(x) импортируете стиль строкой import '.style.css'. Затем в стилях описываете все нужные классы (наиболее используемый тип селекторов из всех, что есть в CSS) и указываете один из них в атрибуте className вашего компонента.
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.post { background-color: #5dc7f1; border: 3px double #0d7ba3; padding: 15px; margin-bottom: 20px; } .title { color: #fff; text-align: center; } .author { font-weight: bold; font-size: 1.2em; } .text { font-style: italic; font-size: 14px; font-family: 'Georgia', serif; } |
Импорт в index.js(x)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import "./style.css"; function Post(props){ return ( <div className="post"> <h2 className="title">{chooseName}</h2> <p className="author">{props.author}</p> <p className="text">{props.body}</p> </div>) } export default Post; |
В результате все ваши стили (классы) применятся и разметка будет такой:
|
1 2 3 4 5 |
<div class="post"> <h2 class="title">...</h2> <p class="author">...</p> <p class="text">...</p> </div> |
Способ 4. Импорт стилей из css-модуля
В этом случае вы создаете не style.css, а файл с именем Style.module.css (либо Post.module.css и т.п.). В этом файле вы размещаете классы с css-свойствами, как в любом другом обычном файле css. Например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.post { background-color: #97cc3a; border: 3px double #3b5213; padding: 15px; margin-bottom: 20px; } .title { color: #fff; background-color: #3b5213; margin: 0; padding: 10px; text-align: center; } .author { font-weight: bold; font-size: 1.2em; } .text { font-style: italic; font-size: 14px; font-family: 'Georgia', serif; } |
Отличия начинаются при импорте. Вы не просто импортируете весь css-файл строкой import './style.css' - вам нужно импортировать модуль с именем, например, cssClasses, а потом использовать его, как объект со свойствами в виде имен классов, которые вы добавляете в атрибут className в разметке компонента.
Чтобы было понятнее, давайте посмотрим в код примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import cssClasses from "./Post.module.css"; function Post(props){ return ( <div className={cssClasses.post}> <h2 className={cssClasses.title}>{props.title}</h2> <p className={cssClasses.author}>{props.author}</p> <p className={cssClasses.text}>{props.body}</p> </div>) } export default Post; |
Отличия на этом не заканчиваются. React сгенерирует вам названия классов несколько иным способом в конечной разметке, чем, если бы вы использовали подход с классами из style.css. Пример:
|
1 2 3 4 5 |
<div class="_post_1dxv8_1"> <h2 class="_title_1dxv8_13">...</h2> <p class="_author_1dxv8_27">...</p> <p class="_text_1dxv8_35">...</p> </div> |
Способ 5. Styled components - стилизованные компоненты
Styled components - это npm-пакет, который вы должны добавить в свой проект на React, для того чтобы иметь возможность работать со стилями в js-синтаксисе.
Для начала вам нужно будет открыть страницу документации Installation и набрать (скопировать) строку вида
|
1 |
npm install --save styled-components |
Затем имеет смысл создать файл с именем style.js или style.css.js, который начинается с импорта загруженного пакета. В этом вы будете записывать код в синтаксисе по примеру с главной страницы проекта Styled components, а именно: вам нужно создать переменную, которую вы потом будете экспортировать (например, с именем css), в виде объекта. Внутри же у этой переменной будут другие объекты, для которых вы задаете тег-обертку и стили в в синтаксисе, подобном SCSS.
Например, нам нужно стилизовать форму и поля типа <input> в ней:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import styled from "styled-components"; const css = { FormContainer: styled.div` width: 70%; margin: 40px auto; border-radius: 15px; padding: 30px; box-shadow: 0 0 3px grey; `, Input: styled.input` display: block; border: 1px solid #ddd; border-radius: 8px; padding: 10px; width: 100%; outline: none; background-color: #e4e4e4; margin-bottom: 20px; :last-child { margin-bottom: 0; } &:focus { box-shadow: inset 0 0 6px grey; } ` } export default css; |
Далее стили нужно из этого файла импортировать в файл какого-либо нужного вам React-компонента (например, Form.jsx), сохранить в переменную нужные объекты и вывести их внутри компонента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import css from "../styles/form.css.js"; import MyInput from "./MyInput.jsx"; const { FormContainer} = css; const Form = () => { return ( <React.Fragment> <FormContainer> <MyInput placeholder="Введите планируемое мероприятие"/> <MyInput placeholder="Введите дату мероприятия" /> <MyInput placeholder="Введите комментарий" /> </FormContainer> </React.Fragment> ) } export default Form; |
В файле MyInput.jsx вы тоже импортируете файл стилей и используете деструктуризацию, чтобы добыть нужный объект стиля из переменной css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from "react"; import css from "../styles/form.css"; const { Input } = css; const MyInput = (props) => { const {placeholder} = props; return ( <> <Input type="text" placeholder={placeholder} maxLength={70} /> </> ) } export default MyInput; |
В результате вы получите форму со сгенерированными классами примерно такого вида:
|
1 2 3 4 5 |
<div class="sc-hHTZFM cpfpCu"> <input type="text" maxlength="70" class="sc-dmcuvF fFkcOe" placeholder="Введите планируемое мероприятие"> <input type="text" maxlength="70" class="sc-dmcuvF fFkcOe" placeholder="Введите дату мероприятия"> <input type="text" maxlength="70" class="sc-dmcuvF fFkcOe" placeholder="Введите комментарий"> </div> |
Плюсом стилизованных компонентов является то, что они поддерживают пропсы, т.е. мы можем передать в качестве какого-либо props цвет фона или текста для элемента, который хотим как-то динамически менять. Для этого служит функция-коллбек, которая принимает параметр props, а на выходе возвращает какое-то определенное свойство из тех, которые могут быть пропсами компонента.
Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import styled from "styled-components"; const css = { Button: styled.button` display: block; width: 250px; line-height: 42px; padding: 5px 10px; border-radius: 6px; text-align: center; cursor: pointer; margin: auto; background-color: ${props => props.backgroundColor}; &:hover { background-color: #b0f347; } ` } export default css; |
В React-компоненте код будет таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from "react"; import css from "../styles/form.css.js"; import MyInput from "./MyInput.jsx"; const { FormContainer, Button} = css; const Form = () => { return ( <React.Fragment> <FormContainer> <MyInput placeholder="Введите планируемое мероприятие"/> <MyInput placeholder="Введите дату мероприятия" /> <MyInput placeholder="Введите комментарий" /> <Button backgroundColor={"#b0f347"}>Сохранить мероприятие</Button> </FormContainer> </React.Fragment> ) } export default Form; |
Пример стилизации с помощью Styled components
See the Pen Contact US by Gabriele Corti (@borntofrappe) on CodePen.
Способ 6. Применение сборок на основе стилей
Вы можете воспользоваться сборкой, которая уже предполагает стилизацию ряда компонентов. Тут есть платные и бесплатные варианты. Одним из бесплатных является Argon Design System. Вам нужно скачать архив или загрузить его с Github, а затем запустить сборку и создавать на ее основе свои проекты.
Для того чтобы запустить установку нужных npm-пакетов, нужно в терминале, открытом в папке со всеми скачанными файлами Argon Design System набрать:
|
1 2 3 4 5 6 7 8 |
npm install //затем npm start //либо npm run install:clean //если при установке пакетов будут ошибки npm install --g cross-env |
После установки пакетов с помощью npm run install:clean вы вскоре увидите запуск приложения. Когда вам нужно будет это сделать самостоятельно, вы используете команду из create-react-app, которе лежит в основе Argon Design System:
|
1 |
npm start |
Для конечной сборки вам понадобится команда npm run build.
На данный момент система основана на Bootstrap 4 / Reactstrap, поэтому тем, кто знаком с Bootstrap, будет довольно легко разобраться в классах и стилях. Шрифт в проекте - OpenSans, подключается в index.html в папке public ссылкой:
|
1 2 3 4 |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" /> |
Навигация в сборке осуществляется с помощью React Router.
В сборке есть набор собственных иконок, список которых можно посмотреть на сайте. Также в нее подключены иконки Font Awesome, правда устаревшей на данный момент версии 4.7. Однако, вы получаете всю сборку бесплатно при регистрации, так что будьте готовы, что ее не обновляют слишком часто.
Также на страницах документации вы можете посмотреть информацию о компонентах. Например, здесь вы найдете разметку компонента Navbar, тут есть пример карусели Bootstrap. Информация о цветах и цветовых классах также доступна на оффсайте.
Для понимания того, как это сделать, можно посмотреть бесплатный курс на Udemy Build your React App fast using React Design System от команды Creative Tim, которая разработала Argon Design.
