По мере того, как становится все более и более распространенным формулировать наши стили с помощью 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-модулях. Оставайтесь с нами для этого. Ваше здоровье!