title: Use props to switch width using styled components mixins
body: <p>Tech used - Styled components and react</p>
  
  <p>I have a mixin to make my app responsive</p>
  
  <pre><code>import { css } from 'styled-components';
  
  export default {
    smallScreen: (...args: any) =&gt; css`
      @media (max-width: 600px) {
        ${css(...args)}
      }
    `,
  }
  </code></pre>
  
  <p>In another react component, I want to use the above defined method to write css that applied on small screens.</p>
  
  <pre><code>const SideNavWrapper = styled.article`
    background: red; // this works
    width: ${props =&gt; props.expanded ? '260px' : '80px'}; // this works
  
    ${media.smallScreen({
      background: 'yellow', // this works
      width: `${props =&gt; props.expanded ? '100%' : '20px'}`, // this doesn't work. props is undefined.
    })}
  `;
  </code></pre>
  
  <p>Depending on <code>props.expanded</code>, I want to switch the width of SideNavWrapper. However it doesn't work on smaller screens.
  Background color changes as expected but not the width. On debugging, I realized that props is undefined. Any ideas what am I missing? Thank you so much!</p>