Регистрация

[Разработка веб-сайтов, JavaScript, Программирование, .NET, ReactJS] Стилизованные компоненты в React: краткое руководство (перевод)

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
17-Авг-2020 15:31
Цитировать


Доброго времени суток, друзья!
Представляю вашему вниманию перевод небольшой заметки про использование стилизованных компонентов (далее — СК) в React.
Без лишних слов.
Что такое СК?
СК — это библиотека для React и React Native для создания и управления CSS.
Данное решение относится к концепции «CSS-in-JS», когда вы определяете CSS прямо в JavaScript-файле (т.е. в компоненте в случае с React).
О популярности этого решения в среде React-разработчиков свидетельствует около 8 млн скачиваний в месяц из npm и 30 тыс звезд на GitHub.
Разумеется, для знакомства со СК необходимо хотя бы в общих чертах знать React.
Преимуществами СК является следующее:
  • Это обычный CSS. Да, вы пишете CSS в JS-файле, но синтакис от этого не меняется
  • При использовании СК автоматически добавляются вендорные префиксы, обеспечивающие кроссбраузерность
  • Неиспользуемые стили также автоматически удаляются
  • Более того, автоматически генерируются названия классов компонентов, что избавляет от необходимости использования методогии типа БЭМ

Установка СК
Для использования СК нужно их сначала установить:
npm i styled-components

Далее их нужно импортировать в каждом файле, в котором они будут использоваться:
import styled from 'styled-components'

После этого можно с ними работать.
Создание СК
Откройте проект, над которым вы работаете, или быстро создайте его с помощью npx create-react-app app-name и откройте любой компонент, например, App.js.
Давайте добавим в него наш первый СК:
// App.js
import React from 'react'
import styled from 'styled-components'
// СК
const Button = styled.a`
    background-color: teal;
    color: white;
    padding: 1rem 2rem;
`
const App = () => {
    return (
        <Button>Кнопка</Button>
    )
}
export default App

Разберем данный код:
  • Объявляем название компонента посредством const Button
  • styled предоставляет нам функционал СК
  • Обратите внимание на «a» после styled. Это HTML-тег «a». В СК можно использовать любые HTML-теги (section, h1, div и т.д.)

<Button>, возвращаемый в App, это обычный React-компонент.
В предыдущем примере мы создали СК внутри существующего компонента.
Однако это можно (и даже нужно) сделать в отдельном файле (например, в Button.js):
// Button.js
import styled from 'styled-components'
const Button = styled.a`
    background-color: teal;
    color: white;
    padding: 1rem 2rem;
`
export default Button

После этого мы можем импортировать Button как любой другой компонент:
// App.js
import React from 'react'
import styled from 'styled-components'
// импортируем кнопку
import Button from './Button'
const App = () => {
    return (
        <Container>
            <Button>Кнопка</Button>
        </Container>
    )
}
export default App

Готово.
Поздравляю, вы только что создали свой первый СК.
Использование пропсов для редактирования СК
Представьте, что у вас есть компонент Button, и вам нужно применять к нему разные стили в зависимости от назначения кнопки (primary — главная или основная, secondary — второстепенная или дополнительная, danger — опасность, предупреждение и т.д.)
Для этого можно использовать пропсы.
Рассмотрим пример.
Здесь мы рендерим две кнопки, стиль одной из который зависит от пропса:
// App.js
import React from 'react'
import styled from 'styled-components'
import Button from './Button'
const App = () => {
    return (
        <>
            <Button>Кнопка</Button>
            <Button primary>Главная кнопка</Button>
        </>
    )
}
export default App

Обратите внимание на использование сокращенного синтаксиса фрагмента (<></>).
После этого добавляем динамические стили в компонент Button:
// Button.js
import styled from 'styled-components'
const Button = styled.a`
    display: imline-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'} означает, что если пропс будет иметь значение true, то цвет фона будет белым, а цвет текста — palevioletred.
Такой способ можно использовать в простых случаях, однако он не подходит для случаев, когда нужно обрабатывать несколько пропсов, а также при наличии нескольких свойств, зависящих от них.
Поэтому имеет смысл импортировать { 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`
        backround: red;
        color: white;
    `}
`
export default Button

Отлично.
Как сделать кнопку более отзывчивой или адаптированной?
Использование медиа-запросов
Для этого следует добавить медиа-запросы в шаблон (внутрь шаблонного или строкового литерала):
// Button.js
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

Обработка псевдоселекторов
Это делается по аналогии с медиа-запросами.
Например, добавим обработку наведения курсора на кнопку (псевдоселектор hover):
// 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 — все есть компонент.
Для этого интерфейс приложения разбивается на отдельные части, а затем эти части собираются в один файл таким образом, чтобы сохранялась возможность расширения или масштабирования приложения.
Такой подход имеет ряд преимуществ, но существует одна проблема: как использовать одинаковые стили для нескольких компонентов? Т.е. как применить глобальные стили?
Мы можем, например, захотеть следующее:
  • Установить шрифт для всего текста
  • Установить фон для всех страниц
  • Перезаписать некоторые браузерные стили (т.е. стили, устанавливаемые по умолчанию)

В СК для этого используется функция createClodabStyle.
Сначала откройте основной компонент приложения.
Таким компонентом, обычно, является App.js.
Затем импортируйте в него createClodabStyle и определите некоторые стили в компоненте 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

Для того, чтобы это работало, нужно добавить созданный компонент в начало App:
// App.js
import React from 'react'
import styled, { createClodabStyle } 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 в качестве узла в начало виртуального DOM является обязательным требованием для использования глобальных стилей.
Надеюсь, статья была вам полезной. Благодарю за внимание.
 ===========
 Источник:
habr.com
===========
 ===========
 Автор оригинала: Tom Ray
===========Похожие новости: Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_javascript, #_programmirovanie (Программирование), #_.net, #_reactjs, #_javascript, #_react.js, #_reactjs, #_react, #_programmirovanie (программирование), #_razrabotka (разработка), #_styledcomponents, #_styled_components, #_stilizovannye_komponenty (стилизованные компоненты), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_javascript, #_programmirovanie (
Программирование
), #_.net, #_reactjs
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

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

Текущее время: 22-Ноя 04:15
Часовой пояс: UTC + 5