javascript内联样式中的全局变量

Question

我试着glamor next.js推动SAML Test Connector (IdP w/attr w/ sign response)。我正在尝试将一些CSS文件转换为魅力语法。

目前我使用CSS3变量来定义一些常用规则，calc使变量适应我的组件上下文

#variables.css
:root {
--gutter: 1rem;
}

#myComponent.css
.myComponent {
margin:calc(var(--gutter) / 2)
}

我很难找到一种在魅力API中翻译的好方法。

到目前为止，我做了类似的事情：

#variables.js
export const gutter = 1;

#myComponent.js`
import {gutter} from 'variables.js';
const style = css({
  margin:(gutter * 2) + 'rem'
});

但我对+'rem'部分以及gutter定义中缺少单位感到不满意。

我做错了吗？有更好的方法吗？