GatsbyでProps渡してPCSP表示非表示切り替えする

SizedImageというComponentでspOnlyというPropsにtrueを渡す

<SizedImage spOnly={true} filename={'about/history/img-logo.png'}></Image>

SizedImageのComponentを定義

export default class SizedImage extends React.Component {
  render() {
    return(
      <Container spOnly={this.props.spOnly}>
        <Image filename={this.props.filename}></Image>
      </Container>
    )
  }
}

styledComponentで

const Container = styled.div`
    @media all and (max-width:736px) {
        display: ${props => props.spOnly ? 'block' : 'none' };   
    }
`

こんな感じで書くと、spOnlyがtrueのときのみdisplay:blockになる。

もしくは

const Container = styled.div`
    @media all and (min-width:737px) {
        display: ${this.props.spOnly === 'true' && 'none' };    
    }
`

spOnlyがtrueのとき737px以上でdisplay:noneになる