title: How to evaluate the passed prop to the styled component using react and typescript?
body: <p>i want to add a background color to the styled component div if state active is true.</p>
  
  <p>i am doing it like so</p>
  
  <pre><code>function Main() {
      const [active, setActive] = useState(false);
      return (
          &lt;ChildComponent 
              active={active}/&gt;
      );
  }
  
  
  const ChildComponent = styled.div&lt;{ active?: boolean }&gt;`
      height: 100%;
      ${({ active }) =&gt; active &amp;&amp; 'background-color: grey';}
  `;
  </code></pre>
  
  <p>This works fine. but instead of just passing string grey to background color i want to pass props like below.</p>
  
  <pre><code>const ChildComponent = styled.div&lt;{ active?: boolean }&gt;`
      height: 100%;
      ${({ active }) =&gt; active &amp;&amp; 'background-color:'${(props: any) =&gt; 
      props.theme.colors.grey.light3}};
  
  `;
  </code></pre>
  
  <p>This is not the right syntax to do it. could someone help me fix this thanks.</p>