title: How do I make conditional rendering for styled component?
body: <pre><code>const Agree = styled.button`
    width: 270px;
    height: 40px;
    margin-top: 100px;
    font-weight: bold;
    font-size: 17px;
    color: ${({ isValid }) =&gt; (isValid ? 'white' : 'grey')};
    border-radius: 5px;
    border: none;
    background-color: ${({ isValid }) =&gt;
      isValid ? 'lightskyblue' : 'lightgrey'};
  `;
  </code></pre>
  <pre><code>const [checkedOne, setCheckedOne] = useState(false);
  const [checkedSecond, setCheckedSecond] = useState(false);
  
  &lt;Agree isValid&gt; Valid &lt;/Agree&gt;
  </code></pre>
  <p>Here I want to make Agree component such that if checkedOne and checkedTwo are both true, Agree component has props isValid and when one of them is false, it is just <code>&lt;Agree&gt; valid &lt;Agree&gt;.</code> I tried code like this -&gt; <code>{checkedOne &amp;&amp; checkedSecond ? &lt;Agree isValid&gt; Valid &lt;/Agree&gt;</code>}  Yet, it does not work and I was wondering if there is a way to have &quot;isValid&quot; appear when two states are true.</p>