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

用户名

在普通的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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

导入 .less 变量以在 React Styled Components 中使用

React Styled-Components 传递道具问题

React Styled Component 的 CSS 方法优化

styled-components表示在您的React组件(Component)周围包装了styled()

Styled-Components的.attrs()函数的用例是什么?

React Styled Components-如何访问原始HTML

React Styled-Components:参考其他组件

React Styled-Components CSS向子元素添加!important

nextjs + react-native-web + styled-components:warnOnce

React Styled-Components 3个按钮大小

React Styled Components条件三元运算符

React Styled-Components主题-提供者动态主题

Styled Components 渲染基于 props 的 Styled 标签

nx React/Next.js styled-components 共享类型声明文件 styled.d.ts

React + Styled Components-分离并重复使用CSS“捆绑包”

React Styled Components:ReferenceError:初始化前无法访问

如何在React Styled-Components中设置子组件的样式

使用React Styled Components在两种类型的组件之间共享相同的样式

React-Native-Styled-Components:类型“DefaultTheme”上不存在属性“backgroundColor”

在新的React版本中,如何修复TypeError:styled_components__WEBPACK_IMPORTED_MODULE_3__.default.dev?

如何在 React Styled Components 中仅为一个道具制作多种样式?

React Styled-Components-如何根据道具条件或伪类渲染样式?

使用状态来自定义样式的react + styled-components

TypeError:styled_components__WEBPACK_IMPORTED_MODULE_0 __。default.vedio不是对React的函数

Storybook + Ionic React + styled-components CSS 順序問題

React, styled-components - 显示光标:指针;如果菜单打开,在页面上?

如何在 React - typescript - Styled-components 应用程序中使用单击事件修改 DOM?

将 calc() 与 react-native 和 styled-components 一起使用时出错

Styled-components 和 react-icons <IconContext.Provider> 组件