title: How to check a prop to output a block of code on a styled object in Emotion
body: <p>What is the best practice to output a block of code on a <a href="https://emotion.sh/docs/styled#object-styles" rel="nofollow noreferrer">styled object in Emotion</a>?</p>
  <p>A simple boolean statement looks like this:</p>
  <pre><code>const StyledComponent = styled('div')(({ check }) =&gt; ({
      position: check ? 'relative' : undefined
  })
  </code></pre>
  <p>But what is the best solution for a block of code like the following example if I don't want to check each line of code?</p>
  <pre><code>const StyledComponent = styled('div')(({ check }) =&gt; ({
    // some style here
    // ...
  
    // only load pseud element if &quot;check&quot; is true
    '&amp;::before': {
      content: `''`,
      position: 'absolute',
      left: '0%',
      top: '0%',
      width: '100%',
      height: '100%',
      background: 'blue'
    }
  }))
  </code></pre>
  <p>I have some solutions in mind.</p>
  <ul>
  <li>Add the if statement on the <code>content:</code> as without content the rest won't show. It is not my favourite because the rest of the code still getting loaded.</li>
  <li>Add the if statement to load a new div inside this component. This way I can target this specific div instead of using the pseudo-class <code>before</code>.</li>
  </ul>