javascript - 使用带有样式组件的 Javascript 变量

Question

我正在使用 styled-components构建我的组件。所有接受自定义值的样式属性都在我的组件中重用(应该如此)。考虑到这一点，我想使用某种全局变量，以便更新将传播到所有组件，而无需单独更新每个样式。

像这样的东西:

// Variables.js

var fontSizeMedium = 16px;

// Section.js

const Section = styled.section`
  font-size: ${fontSizeMedium};
`;

// Button.js

const Button = styled.button`
  font-size: ${fontSizeMedium};
`;

// Label.js

const Label = styled.span`
  font-size: ${fontSizeMedium};
`;

我想我的语法错了？另外，我知道在 Javascript 领域不建议使用全局变量，但在设计领域中，跨组件重用样式是绝对必须的。这里有什么取舍？

Answer 1

我最终弄清楚了这一点，所以这是你可以做到的，至少在使用 React 的情况下是这样。

您需要在一个文件中定义变量并导出它们。

// Variables.js

export const FONTSIZE_5 = '20px';

然后您需要将这些变量导入到每个组件文件中。

// Button.js

import * as palette from './Variables.js';

然后你可以像这样在你的样式组件中使用变量:

const Button = styled.button`
  font-size: ${palette.FONTSIZE_5};
`;