Рубріки: Front-end

React-JSS — альтернативный способ стилизации компонентов

Роман Гармидер

29.03.2021 17:27

JSS — это относительно новый инструмент для стилизации компонентов. Вследствие этого JSS еще не так сильно распространен . Но его репозиторий на сайте GitHub собрал уже 6.3k звезд на момент написания статьи. Он использует JavaScript для декларативного способа описания правил CSS, помогает в их переиспользовании и избежании конфликтов. Он может компилироваться в браузере, на стороне сервера или во время сборки в Node.js. Он легко интегрируется в другие JS-фреймворки. React-JSS это его адаптация для библиотеки React.js.

React-JSS

Эта адаптация использует React-хуки для своего использования. Это дает дополнительные преимущества, такие как:

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

Глобальное применение статической части
Авто-обновление стилей при передачи новых переменных

Рассмотрим подробно пример ниже:

import React from 'react'
import {render} from 'react-dom'
import injectSheet, { ThemeProvider } from 'react-jss'
const styles = (theme) => ({
  wrapper: {
    padding: 40,
    background: theme.background,
    textAlign: 'center'
  },
  title: {
    font: {
      size: 40,
      weight: 900,
    },
    color: props => props.color
  },
  link: {
    color: theme.color,
    '&:hover': {
      opacity: 0.5
    }
  }
})
const Comp = ({ classes }) => (
  <div className={classes.wrapper}>
    <h1 className={classes.title}>Hello React-JSS!</h1>
    <a
      className={classes.link}
      href="cssinjs.org/react-jss"
      target="_blank"
    >
      See docs
    </a>
  </div>
)
const StyledComp = injectSheet(styles)(Comp)
const theme = {
  background: '#aaa',
  color: '#24292e'
}
const App = () => (
  <ThemeProvider theme={theme}>
    <StyledComp color="red"/>
  </ThemeProvider>
)
render(<App />, document.getElementById("root"))

В приведенном выше коде, который немного напоминает styled-components, мы импортируем injectSheet и ThemeProvider из библиотеки react-jss. ThemeProvider — это компонент высшего порядка в React, который передает объект theme вниз по дереву с помощью контекста. Этот объект содержит корневую тему компонента.

А injectSheet используется для внедрения стилей в основной компонент Comp. С помощью этой функции создается уже стилизованный элемент StyledComp. Который и используется в шаблоне.

В итоге мы увидим в браузере такой результат:

Полученный результат

Вот здесь можно испытать React-JSS в действии.