Лучший способ импорта переменных scss с React Styled-Components? - PullRequest
Новая
       38

Лучший способ импорта переменных scss с React Styled-Components?

0 голосов
/ 09 января 2019

В обычных компонентах React, если у вас есть scss, вы можете импортировать в них другие файлы scss и получить доступ к переменным scss, таким как $color-primary: blue ...

Какой лучший способ сделать это с помощью styled-компонентов?

Допустим, у меня есть некоторые основные переменные для приложения, которое я хочу использовать: font-size, font-family, colors и т. Д. И я хочу иметь возможность импортировать их в React Component и использовать их в стилизованных компонентах. этого файла?

Я знаю, что вы можете устанавливать переменные в каждом отдельном файле и использовать их, но это противоречит цели иметь "глобальные переменные" и использовать их.

Технически я знаю, что styleled-компоненты не являются scss, поэтому вы, вероятно, даже не можете импортировать файл scss и использовать его переменные - так как у вас есть глобальные переменные, которые могут импортировать все файлы styleled-компонентов и использовать?

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Чтобы ответить: «Как у вас есть глобальные переменные, которые могут импортировать и использовать все файлы стилевых компонентов?»

Вы должны установить тему , которая может быть распространена в вашем приложении через ThemeProvider.

После этого, возможно, есть какая-то магия, когда вы можете импортировать ваши существующие переменные scss в файл, где инициируется ваш theme, и назначать эти существующие переменные по мере необходимости .... но TBH, я бы просто использовал theme и kill scss (styleled-компонент FTW)

0 голосов
/ 09 января 2019

Я думаю, что вы хотите иметь файл токенов, токены используются для организации "переменной", которая описывает свойство в вашей системе проектирования, https://www.lightningdesignsystem.com/design-tokens/#site-main-content.

К счастью для вас, это может быть сделано довольно просто в мире javascript. в значительной степени вам нужно всего лишь создать файл, в котором вы объявляете все эти константы, а затем экспортируете его и используете его там, где вы хотите это сделать:

Я могу предложить вам простое решение: 

// tokens.js

const tokens = {
  colorGray1: "#FF1100",
  colorGray2: "#CCC",
  colorGray3: "#DDD",
  colorGray4: "#EEE",
  colorBackgroundBlack: "#000",
}

export default tokens;

// app.js
import React from "react"
import styled from "styled-component";
import tokens from "./tokens.js" // this is somewhere in your app

const StyledComponent = styled.div`
  color: ${tokens.colorGray1},
  background: ${tokens.colorBackgroundBlack}
`

export default function MyComponent() {
  return <StyledComponent>This has grey color and black background</StyledComponent>
}

также, styled-component имеет действительно хорошую библиотеку с именем polish, которая имитирует микширование и функцию, которую sass обычно обеспечивает https://polished.js.org/

Удачи!

...