javascript - 样式组件插值

Question

我想知道为什么每个人都使用这样的样式化组件

export const Title = styled.div`
  margin-top: 48px;
  font-family: ${({ theme }) => theme.font};
  font-size: ${({ theme }) => theme.sizeBig};
  color: ${({ theme }) => theme.dark};
  font-weight: ${({ theme }) => theme.fontWeight}
`

而不是类似的东西

export const Title = styled.div`
  margin-top: 48px;
  ${({ theme }) => css`
    font-family: ${theme.font};
    font-size: ${theme.sizeBig};
    color: ${theme.dark};
    font-weight: ${theme.fontWeight}
  `}
`

是否有任何理由在每一行上创建箭头函数？

Answer 1

归结为个人喜好。实际上，我在我的应用程序中走得更远:

export const Title = styled.div(({ theme }) => css`
  margin-top: 48px;
  font-family: ${theme.font};
  font-size: ${theme.sizeBig};
  color: ${theme.dark};
  font-weight: ${theme.fontWeight}
`)

我喜欢这种方式，因为每个样式都在一个模板文字中定义。

Styled Components 将一些组件标记为静态作为优化步骤，如果没有任何内容可以插入的话。读书this ，似乎这种方法不会对性能产生影响，因为仅插入一个属性会将整个样式化组件标记为非静态。