Javascript 样式化组件插值

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

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}
  `}
`

---

是否有任何理由在每行上创建箭头功能？

归结为个人偏好。实际上，我在我的应用程序中更进一步：

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}
`)

我喜欢这种方式，因为每个样式都是在单个模板文本中定义的

样式化组件将某些组件标记为静态组件，作为优化步骤，如果没有任何可插值的内容。在阅读中，这种方法似乎不会对性能产生影响，因为只有一个属性被插值会将整个样式化组件标记为非静态