媒体查询条件样式组件

Question

<Main/> 有一个可选的道具 isFirstPage 所以如果它有这个道具它将与媒体查询一起使用。 下面的代码片段工作正常，但我想有更好的解决方案。

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

Answer 1

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

import styled, { css } from 'styled-components'

const YourComponent = styled.div`
  //...
  
  ${props => props.isFirstPage && css`
     @media only screen and (max-width: 480px) {
       padding: 8px 8px 24px 8px
     }
  `}
`;

这是适合我的解决方案。