来自 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}'
一起使用是一种“干净”的方式。这种策略是微不足道的,并且会导致代码库困惑。
最佳答案
我设计了一个巧妙的技巧来封装特定范围内的变量:
styled.h1(({size='4em', color='lime'}) => `
font-size: ${size};
color: ${color};
text-align: center;
`)
我写了一个Medium post在过去打破了这种方法的解释
关于css - 样式组件局部变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53345396/