将样式字典导入样式组件答案

【问题标题】：Import style dictionary into styled components将样式字典导入样式组件
【发布时间】：2021-09-29 19:46:07
【问题描述】：

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

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

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

@import "dictionary.scss";

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

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

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

【问题讨论】：

【解决方案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};
`

【讨论】：