<Main/> के पास एक वैकल्पिक प्रोप isFirstPage है, इसलिए यदि उसके पास यह प्रोप है तो वह मीडिया क्वेरी के साथ होगा। नीचे स्निपेट ठीक काम करता है, लेकिन मुझे लगता है कि एक बेहतर समाधान है।

export default styled(Main)`
  ...my styles...
  ${props => props.isFirstPage && '@media only screen and (max-width: 480px) {padding: 16px}'}
`;
1
Arthur 22 पद 2019, 12:29

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

यह मेरे लिए समाधान है।

2
Arthur 2 जुलाई 2020, 12:52