媒体查询条件样式组件

Question

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

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

这对我来说是解决方案。