在普通的React组件中,如果您有scss,则可以将其他scss文件导入其中,并可以访问诸如$color-primary: blue
...的scss变量。
用样式组件做到这一点的最佳方法是什么?
可以说我要使用的应用程序有一些主要变量:字体大小,字体系列,颜色等。而且我希望能够将它们导入到React组件中并在该文件的样式化组件中使用?
我知道您可以在每个文件中设置变量并使用它们,但这违背了拥有“全局变量”并使用它们的目的。
从技术上讲,我知道样式化组件不是scss,因此您甚至可能无法导入scss文件并使用其中的变量-那么如何拥有所有样式化组件文件都可以导入和使用的全局变量?
我认为您想要的是一个令牌文件,令牌用于组织描述您设计系统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有一个很好的库,名为波兰语,它可以模拟sass通常提供的混合和功能https://polished.js.org/
祝好运!
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句