媒体查询条件样式化组件

Question

<Main/>具有可选的道具isFirstPage，因此，如果具有此道具，它将与媒体查询一起使用。 下面的代码段效果很好，但我认为有更好的解决方案。

export default styled(Main)`
  ...my styles...
  ${props => props.isFirstPage && '@media only screen and (max-width: 480px) {padding: 16px}'}
`;

Answer 1

我意识到我们可以将其用作：

${props => props.isFirstPage && `
  @media only screen and (max-width: 480px) {
    padding: 8px 8px 24px 8px
  }
`}

这是我的解决方法。