css - 样式组件局部变量

Question

来自 SCSS (SASS)

以下 SCSS 代码的适当Styled-Components 实现是什么？

SCSS:

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

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

目前 styled-component (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}' 一起使用是一种“干净”的方式。这种策略是微不足道的，并且会导致代码库困惑。

Answer 1

我设计了一个巧妙的技巧来封装特定范围内的变量:

styled.h1(({size='4em', color='lime'}) => `
  font-size: ${size};
  color: ${color};
  text-align: center;
`)

---

我写了一个Medium post在过去打破了这种方法的解释