使用styled-components与Javascript变量

17 浏览
0 Comments

使用styled-components与Javascript变量

我正在使用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领域中不推荐使用全局变量，但在设计领域中，跨组件重用样式是必不可少的。这里有什么权衡之处？

0