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

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

如果没有要插入的内容，带样式的组件会将某些组件标记为静态，这是优化步骤。读this时，似乎这种方法不会对性能产生影响，因为仅插入一个属性会将整个样式化的组件标记为不是静态的。

样式化元素插值

1 个答案: