将样式字典导入样式组件

Question

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

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

然后，在实际的.scss文件中，我可以导入这个字典，方便访问pallete，从而实现标准化，方便样式表的创建：

@import "dictionary.scss";

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

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

有没有一种方法可以将 sass 的词典功能与带样式的组件协调起来？ 以某种方式将 dictionary.sass 导入我的 styledComponent.js 文件甚至是 .json 之类的。一种导入非 React 属性或状态的静态托盘、字体、边距数据的方法。

Answer 1

您可以在文件中以纯 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};
`

Import style dictionary into styled components