使用React Styled-Components导入scss变量的最佳方法？

Question

在正常的React组件中，如果你有scss，你可以将其他scss文件导入到它们中，并获得对$color-primary: blue等scss变量的访问权限......

使用样式组件的最佳方法是什么？

让我说我有一些我想要使用的应用程序的主要变量：font-size，font-family，colors等。我希望能够将它们导入React组件并在该文件的样式组件中使用它们？

我知道你可以在每个单独的文件中设置变量并使用它们，但这会破坏拥有“全局变量”并使用它们的目的。

从技术上讲，我知道样式组件不是scss，所以你可能甚至无法导入scss文件并使用它的变量 - 那么你如何拥有所有样式组件文件可以导入和使用的全局变量？

Answer 1

我认为你想要的是一个令牌文件，令牌用于组织描述设计系统中的属性的“变量”，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>
}

另外，样式组件有一个非常好的名为polish的库，模拟混合和功能，通常提供https://polished.js.org/

祝好运！

Answer 2

回答：“你如何拥有所有样式组件文件可以导入和使用的全局变量？”

您应该设置一个Theme，可以通过ThemeProvider在整个应用程序中共享。

在那之后也许有一些魔法你可以将你现有的scss变量导入你的theme启动的文件中并根据需要分配那些现有的变量....但TBH，我只是坚持使用theme并杀死scss（样式组件FTW）