时间戳

首页 > 解决方案 > 使用 React Styled-Components 导入 scss 变量的最佳方法？

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

问题描述

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

使用 styled-components 做到这一点的最佳方法是什么？

假设我有一些我想要使用的应用程序的主要变量：字体大小、字体系列、颜色等。我希望能够将它们导入 React 组件并在该文件的样式组件中使用它们?

我知道您可以在每个单独的文件中设置变量并使用它们，但这违背了拥有“全局变量”和使用它们的目的。

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

标签： reactjssassstyled-components

解决方案

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

祝你好运！

推荐阅读