媒体查询条件样式组件

【问题标题】：Media query condition styled-components媒体查询条件样式组件
【发布时间】：2020-04-14 00:25:27
【问题描述】：

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

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

【问题讨论】：

标签： css reactjs sass media-queries styled-components

【解决方案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
     }
  `}
`;

这是我的解决方案。

【讨论】：