样式组件插值

Question

我想知道为什么大家都像这样使用styled components

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

每行都创建箭头函数有什么理由吗？

- Bogdan Sikora

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将一些组件标记为静态，如果没有任何插值。从这里的阅读来看，似乎这种方法不会影响性能，因为只有一个属性被插值会导致整个styled组件被标记为非静态。

- Raicuparta