样式化组件局部变量

来自 SCSS ( 萨斯 )

什么是合适的 样式化组件 实施以下内容 SCSS 代码?

SCSS:

.circle{
  $size: 16px;  // <-- SCSS FTW. use such a trick in styled-components

  height: $size;
  width: $size;
  .. rest of properties...
}

目前 样式化组件 ( Circle )看起来像这样:

...lots of other styled exports

export const Circle = styled.div`
  height: 16px;
  width: 16px;
  background: red;
  border-radius: 50%;
`

...lots of other styled exports

问题是,我想让这个“毫无意义” size 变量在使用它的同一上下文中(就像 SCSS )因为没有其他人关心或永远不会关心它。我不认为把一个变量放在某个地方然后用它 '${size}' 是一种“干净”的方式。这样的策略很小,而且会导致混乱的代码库。