css - 将样式字典导入样式组件

Question

我目前正在决定在项目中使用哪些技术。我一直很喜欢 sass，主要原因是 css 的嵌套以及创建 dicionaty 类来保存所有设计信息的可能性，例如托盘、边距等。如下所示：

$primary-color: #fff;
$seconady-color: #eee;

然后，在实际的 .scss 文件中，我可以导入该字典并轻松访问pallet，从而实现标准化并促进样式表的创建：

@import "dictionary.scss";

样式化的组件是一件很棒的事情，我完全同意他们网站上所说的 advatanged。但是，我不喜欢失去我在 sass 中拥有的字典功能的想法。我知道我可以将数据从 state 和 props 传递给样式化的组件，但这也意味着，在某些时候，我将不得不从某个地方传递这些 props 或 state。喜欢：

<Foo primaryColor="#fff" secondaryColor="#eee"/>

有没有一种方法可以让我使用 sass 和样式化组件来调和这个字典功能？以某种方式将 dictionary.sass 导入到我的 styledComponent.js 文件甚至 .json 文件中。一种导入不是 React 道具或状态的静态托盘、字体、边距数据的方法。

score 1 · Accepted Answer

您可以在文件中以纯 Javascript 声明变量，并将它们导入到您设置组件的位置。

字典文件看起来像这样：

export const primaryColor = '#fff';
export const seconadyColor = '#eee';

然后在应用样式时插入它们：

import { primaryColor } from './variables.js';

const Button = styled.button`
  border-radius: 3px;
  border: none;
  color: ${primaryColor};
`

1 回答 1