По мере того, как становится все более и более распространенным формулировать наши стили с помощью Javascript, массивы могут быть полезной структурой данных для определения общих конфигураций тем, таких как размеры, цвета, точки останова и т. д.…

Например, я обычно устанавливаю один или несколько файлов конфигурации, которые выглядят примерно так:

/**
 *  styles/config.js
 */
export const scale = [
 4, // Smallest
 8,
 16,
 24,
 32,
 40, // Biggest
]
export const shadesOfGrey = [
  '#FAFAFA', // Lightest
  '#F5F5F5',
  '#EEEEEE',
  '#E0E0E0',
  '#BDBDBD',
  '#9E9E9E',
  '#757575',
  '#616161',
  '#424242', // Darkest
]

И я мог бы использовать это в компоненте React (с styled-components) вот так:

/**
 *  Button/index.js
 */
import React from 'react'
import styled from 'styled-components'
import { scale, shadesOfGrey } from '../styles/config'
export const Button = styled.button`
  padding: ${scale[0]};
  background: ${shadesOfGrey[4]};
`

Если вы новичок в styled-components, приведенный выше код все еще должен быть достаточно читабельным. Мы создаем элемент кнопки и задаем ему отступы и фон, значения для которых берутся из массивов, которые мы экспортировали в наш файл конфигурации. Преимущество этого метода заключается в том, что вы получаете все методы в Array.prototype, чтобы обеспечить динамический и функциональный подход к написанию стилей CSS с использованием значений в этих массивах.

Очень простым примером будет доступ к самому темному оттенку серого, даже если мы продолжаем добавлять больше оттенков серого в нашу конфигурацию. Это можно сделать с помощью Array.prototype.reverse(), но я изначально не понял, что этот метод изменяет исходный массив. В приведенном ниже примере и фон, и цвет будут темно-серыми.

export const DarkButton = styled.button`
  padding: ${scale[1]};
  background: ${shadesOfGrey.reverse()[0]};
  color: ${shadesOfGrey[0]} // !!! MUTATED will be darkest !!!
`

Обходной путь — заключить reverse() в квадратные скобки и распределить его значения в этом новом массиве, например.

export const DarkButton = styled.button`
  padding: ${scale[1]};
  background: ${[...${shadesOfGrey].reverse()[0]};
  color: ${shadesOfGrey[0]} // still lightest! :)
`

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

Я надеюсь написать больше о styled-components и о том, чем они являются, на мой взгляд, огромным шагом вперед в написании CSS для React и естественным развитием моей предыдущей статьи о CSS-модулях. Оставайтесь с нами для этого. Ваше здоровье!