Расскажите об использовании решения css-in-js в проекте React.

React.js
Расскажите об использовании решения css-in-js в проекте React.

1. Что такое css-in-js

Ссылаться на:[Введение в css в js]

Проще говоря, традиционное фронтенд-решение отстаивает принцип «разделения задач», а HTML, CSS и JavaScript должны выполнять свои обязанности и быть разделены.

В реактивном проекте больше пропагандируется схема компонентизации, которая естественным образом формирует способ централизованного написания и управления HTML, CSS и JavaScript.

Метод разработки изменился с «разделения задач» на «смешение задач», что стало привычным способом написания в React:

const Widget = () => {
  <div style={{
      color: 'white',
      fontSize: '12px'
  }} onClick={() => doSometing()}>
    text  
  </div>
}

Однако недостатком такого способа написания является то, что стиль в реакции — это всего лишь простой объект, и он не поддерживает сложное вложение, селекторы и другие возможности, что очень неудобно в использовании. Поэтому появилось большое количество сторонних библиотек для расширения, и эти библиотеки вместе называются css-in-js. Как правило, они поддерживают такие функции, как вложение стилей, селекторы и конфигурация темы.

Некоторые люди специально посчитали существующие трехсторонние библиотеки css-in-js и не имеют слишком много колес:css в списке библиотек js-party. Наиболее популярные из них: стилизованно-компонентные, эмоциональные, гламурные.

Хотя css-in-js дает много преимуществ, у него все еще есть недостатки, и его все еще неудобно использовать в некоторых сценариях. Например, утомительная операция сопоставления свойств css с реквизитами и необходимость писать длинные выражения синтаксического анализа при использовании темы (props => props.theme.colors.primary)так далее.

Поэтому в дополнение к этим библиотекам css-in-js некоторые люди дополнительно инкапсулировали их на их основе, предоставляя некоторые стандартные API, чтобы облегчить нам более быстрое использование функций css-in-js, таких как: rebass, theme-ui.

Во-вторых, использование css-in-js

Пример на эмоциях

Примеры употребления слова эмоция

официальная документация эмоций

эмоция поддерживает как написание реквизита css, так и стилизованное написание

1. Написание реквизита string + css

import { css, jsx } from '@emotion/core'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        background-color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

2. объект + css написание реквизита

import { css, jsx } from '@emotion/core'

const color = 'white'

render(
  <div
    css={{
      padding: '32px',
      backgroundColor: 'hotpink',
      fontSize: '24px',
      borderRadius: '4px',
      '&:hover': {
        backgroundColor: color
      }
    }}
  >
    Hover to change color.
  </div>
)

3. строка + стилизованное письмо

import styled from '@emotion/styled'

const color = 'white'

const Button = styled.div`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  &:hover {
    background-color: ${color};
  }
`

render(<Button>This my button component.</Button>)

4. объект + стилизованное письмо

import styled from '@emotion/styled'

const color = 'white'

const Button = styled.div(
    {
        padding: '32px',
        backgroundColor: 'hotpink',
        fontSize: '24px',
        borderRadius: '4px',
        '&:hover': {
          backgroundColor: color
        }
    }
)

render(<Button>This my button component.</Button>)

можно увидеть,

  • Написание строк выполнено в чистом стиле css, а написание объекта похоже на стиль объекта реакции, но поддерживает вложенность и селектор.
  • Метод написания реквизитов css может напрямую записывать стиль в компонент, а метод написания стилей заключается в инкапсуляции компонента в новый компонент перед его использованием.

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

Как выбрать между эмоциями и стилизованными компонентами

В дополнение к эмоциям также часто используются стилизованные компоненты.

официальная документация styled-components

При использовании styled-components аналогичен стилизованному методу написания эмоций, и перед его использованием необходимо инкапсулировать компонент в новый компонент.

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

Вы также можете указать причину, по которой проект theme-ui выбирает эмоции:

While there are many different solutions to handling CSS in JavaScript, Styled Components and Emotion have become the most widely-used industry-standard libraries. If you're building a custom component library, either Styled Components or Emotion should suit your needs just fine.

For Theme UI, the decision was primarily based on these factors:

  • Emotion's implementation of the css prop and the custom JSX pragma allows for better integration with @styled-system/css
  • The Emotion API includes more lower-level utilities, like createEmotion that could be leveraged when considering how multiple themes could be composed together
  • Emotion's theming context is directly available in @emotion/core, allowing this library to leverage React's context API in different ways
  • В случае с внутренними элементами пользовательского интерфейса Theme, стилизованная утилита компонентов более высокого порядка не обязательно является лучшим API для создания компонентов, и, не включая @emotion/styled в основной пакет, размер пакета сводится к минимуму, т. е. большая часть то же самое может быть достигнуто с помощью css prop

Написание CSS-реквизитов Emotion и некоторые низкоуровневые API, которые он предоставляет, больше подходят для пользовательских компонентов. А в случае не применения стилизованного стиля размер пакета меньше.

3. Rebass: идем дальше и нестандартно

что дает ребас

REBASS является настраиваемой библиотекой компонентов на основе стилизованных систем, эмоций и стилей компонентов. На основании REBASS вы можете быстро построить основные компоненты, которые соответствуют стилю проекта.

В отличие от библиотек пользовательского интерфейса, таких как antd, Rebass предоставляет только несколько примитивных компонентов (Box, Flex, Text, Heading, Button, Link, Image, Card), которые очень просты, как и div. Основываясь на этих компонентах и ​​особенностях темы Rebass, мы можем легко настроить компоненты, используемые в проекте.

Ребасс поддерживает различные способы написания стилей компонентов:

  • sx props: основан на reflexbox, похож на объект css в эмоциях и может напрямую использовать свойства темы, определенные в теме.
  • Проп стиль: на основе стилизованной системы
  • CSS PROP: использование наследования эмоций
  • styled: Наследовать использование эмоций

Несколько примеров использования:

// theme.js
export default {
    colors: {
        primary: 'red'
    },
    variants: {
        badge: {
          display: 'inline-block',
          p: 1,
          color: 'white',
          bg: 'primary',
          borderRadius: 2,
        }
      },
}

// 1.sx prop
<Box variants="badge" sx={{
    bg: 'primary',
    height: '100px'
}}>
  <Text>123</Text>
</Box>

// 2.style prop
<Box variants="badge" bg='primary' height='100px'>
  <Text>123</Text>
</Box>

Как видно из примера:

  • В компоненте rebass мы можем использовать стиль темы напрямую через ключ темы, вместо того, чтобы писать, например,props => props.theme.colors.primaryгромоздкие заявления, как это.
  • Мы можем передать свойство css компоненту (height) как обычное свойство, не делая ничего лишнего.
  • Мы можем быть обернуты группой вариантов стилей css, которые имеют аналогичную функциональность класса темы. Это очень полезная функция, упрощающая использование стилей темы и расширяющая возможности повторного использования.

как это делает ребас

Исходный код библиотеки Rebass очень мал, в основном он объединяет функции reflexbox, styled-system и styled-components.

reflexbox

документация по рефлексбоксу

Основанный на Emotion и Styled Components, reflexbox предоставляет два адаптивных компонента: Box и Flex. В дополнение к этому предоставляется функция sx prop для написания стилей, следующихСпецификация стиля темы, который отлично поддерживает настройку темы.

Можно сказать, что основные возможности Rebass все реализованы reflexbox, только поверх него сделан слой инкапсуляции, кастомизировано несколько базовых компонентов и обеспечена поддержка styled-компонентов.

styled-system

официальная документация styled-system

Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object with typographic scales, colors, and layout properties.

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

Не понимаю? Вы можете увидеть краткий пример ответа, у нас есть белый компонент, который обычно записывается следующим образом:

.white-block {
  color: '#fff'
}

<Compnent className="white-block"/>

После обертывания с помощью styled-system цвет можно поместить в компонент в качестве реквизита. Аналогично добавлению пользовательских тегов к элементам html.

// 定义组件
import styled from '@emotion/styled'
import { color } from 'styled-system'

const Compnent = styled.div`
  ${color}
`

export default Compnent

// 使用组件，这里包装后不仅提供了color属性，也提供了bg(background-color)属性
<Compnent color='#fff' bg='red'/>

Вот что упоминается в документации:

Styled System is a collection of utility functions that add style props to your React components

Как работает стилизованная система

Ссылка на официальное описание

Продолжая приведенный выше пример,${color}Волшебства нет? На самом деле введение такой системы цветовых стилей является функцией

props => `color: ${props.color}; background-color: ${props.bg}`

4. Вывод

В дополнение к содержанию, представленному в статье, css-in-js также поддерживает множество полезных функций, таких какАдаптивный макет,Селектор,анимацияи т.п.

Если вы хотите испытать css-in-js, вы можете сначала попробовать Emotion, чтобы понять некоторые основные принципы, а затем перейти непосредственно к Rebass.

Добро пожаловать, чтобы оставить сообщение~

насчет нас

Шэньчжэнь Qianhai Technology Co., Ltd.

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

Долгосрочный набор удаленных разработчиков, если вы любите пробовать новые технологии, у вас есть небольшая чистота кода, вы можете использовать документы для эффективного общения, и любой вид React/nodejs/ES6 летает, тогда добро пожаловать, чтобы дразнить~ (хотите сделать быстрых денег прошу в обход, спасибо)

Пожалуйста, присылайте свое резюме по адресу: service@qianhaikeji.cn

Конечно, отец партии А также может бросить проект нам в лицо.

Категории