Установите стилизованные компоненты в создании React-App

Автор оригинала: Kalpesh Patel.

Автоматические критические CSS: Стильные компоненты отслеживают, какие компоненты отображаются на странице и вводит их стили и ничего, полностью полностью автоматически. В сочетании с разделением кода это означает, что ваши пользователи загружают наименьшее количество необходимого кода. Нет Наименование класса Ошибки: Стильные компоненты генерируют уникальные имена классов для ваших стилей. Вам никогда не нужно беспокоиться о дублировании, перекрытии или неправительственциях. Простой удаление CSS: Может быть трудно знать, используется ли имя класса где-то в вашей кодовой базе. Стильные компоненты позволяют очевидно, поскольку каждый билет привязан к конкретному компоненту. Если компонент не используется (какой инструмент может обнаружить) и удаляется, все его стили удаляются с ним. Простой динамический стиль: Адаптация стайлинга компонента на основе его реквизитов или глобальной темы просто и интуитивно понятна без необходимости вручную управлять десятками классов. Безболезненное обслуживание: Вам никогда не нужно охотиться на разных файлах, чтобы найти стайлинг, влияющий на ваш компонент, поэтому обслуживание – это кусок пирога, независимо от того, насколько велика ваша кодовая база. Автоматический префикс поставщика: Напишите свои CSS к текущему стандарту и позволяют стилизованные компоненты обрабатывать остальные. Вы получаете все эти преимущества, все еще пишете CSS, которые вы знаете и любят, просто связаны с отдельными компонентами.

Монтаж

Установка стилизованных компонентов требуется только одна команда, и вы готовы к управлению:

NPM Установка –save стилей компонентов

Пример к стилизованным компонентам в приложении Create-React

import React from 'react'
import styled from 'styled-components'

const StyledCounter = styled.div`
  /* ... */
`
const Paragraph = styled.p`
  /* ... */
`
const Button = styled.button`
  /* ... */
`

export default class Counter extends React.Component {
  state = { count: 0 }

  increment = () => this.setState({ count: this.state.count + 1 })
  decrement = () => this.setState({ count: this.state.count - 1 })

  render() {
    return (
      
        {this.state.count}
        +
        -
      
    )
  }
}