title: Emotion Js and TypeScript problems when passing props to styled
body: <p>i got this errors:</p>
  
  <pre><code>No overload matches this call.   Overload 1 of 2, '(...styles: Interpolation&lt;Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, "form" | ... 264 more ... | "value"&gt; &amp; { ...; }&gt;[]): StyledComponent&lt;...&gt;', gave the following error.
      Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'Interpolation&lt;Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, "form" | ... 264 more ... | "value"&gt; &amp; { ...; }&gt;'.
        Type 'TemplateStringsArray' is not assignable to type 'ObjectInterpolation&lt;Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, "form" | ... 264 more ... | "value"&gt; &amp; { ...; }&gt;'.
          Types of property 'filter' are incompatible.
            Type '{ &lt;S extends string&gt;(callbackfn: (value: string, index: number, array: readonly string[]) =&gt; value is S, thisArg?: any): S[]; (callbackfn: (value: string, index: number, array: readonly string[]) =&gt; unknown, thisArg?: any): string[]; }' is not assignable to type 'string | string[] | undefined'.
              Type '{ &lt;S extends string&gt;(callbackfn: (value: string, index: number, array: readonly string[]) =&gt; value is S, thisArg?: any): S[]; (callbackfn: (value: string, index: number, array: readonly string[]) =&gt; unknown, thisArg?: any): string[]; }' is missing the following properties from type 'string[]': pop, push, concat, join, and 27 more.   Overload 2 of 2, '(template: TemplateStringsArray, ...styles: Interpolation&lt;Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, "form" | ... 264 more ... | "value"&gt; &amp; { ...; }&gt;[]): StyledComponent&lt;...&gt;', gave the following error.
      Argument of type '(props: HamburguerProps) =&gt; "250px" | "0"' is not assignable to parameter of type 'Interpolation&lt;Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, "form" | ... 264 more ... | "value"&gt; &amp; { ...; }&gt;'.
        Type '(props: HamburguerProps) =&gt; "250px" | "0"' is not assignable to type 'FunctionInterpolation&lt;Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, "form" | ... 264 more ... | "value"&gt; &amp; { ...; }&gt;'.
          Types of parameters 'props' and 'mergedProps' are incompatible.
            Property 'open' is missing in type 'Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, "form" | ... 264 more ... | "value"&gt; &amp; { ...; }' but required in type 'HamburguerProps'.  TS2769
  </code></pre>
  
  <p>on this code:</p>
  
  <pre><code>&gt; 25 | export const Hamburguer = styled('button')`
         |                           ^
      26 |   position: absolute;
      27 |   left: ${(props: HamburguerProps) =&gt; (props.open ? '250px' : '0')};
      28 | `;
  </code></pre>
  
  <p>I was thinking that the problem was related to my code, but doing all the tests, I believe it is not that</p>
  
  <p>I looked for this error or solutions and I didn't find</p>
  
  <p>my <strong>TsConfig</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "types": ["node", "@emotion/core"],
      "lib": ["dom", "dom.iterable", "esnext"],
      "baseUrl": "src",
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react"
    },
    "include": ["src"]
  }
  </code></pre>
  
  <p><strong>my Tsx code:</strong></p>
  
  <pre><code>import Logo from 'assets/images/Logo.png';
  import { useSelector, useDispatch } from 'react-redux';
  import { toggleSide } from 'redux/slices/sideBar';
  
  interface RootState {
    sideBarStatus: boolean;
  }
  
  interface SideBar {
    isOpen: boolean;
  }
  
  const LogoNavigation: React.FC&lt;SideBar&gt; = ({ isOpen }) =&gt; {
    const dispatch = useDispatch();
    return (
      &lt;LogoSide&gt;
        &lt;img src={Logo} alt="Logo Elo Ghost" /&gt;
        &lt;Hamburguer open={isOpen} onClick={() =&gt; dispatch(toggleSide(!isOpen))}&gt;
          &lt;div /&gt;
          &lt;div /&gt;
          &lt;div /&gt;
        &lt;/Hamburguer&gt;
      &lt;/LogoSide&gt;
    );
  };
  
  const SideNavigation: React.FC = () =&gt; {
    // const { sideIsOpen } = useSelector((RootState) =&gt; RootState.toggleSide);
    const selectIsOpen = (state: RootState) =&gt; state.sideBarStatus;
    const sideBarStatus = useSelector(selectIsOpen);
    return (
      &lt;SideNav&gt;
        &lt;LogoNavigation isOpen={sideBarStatus} /&gt;
      &lt;/SideNav&gt;
    );
  };
  
  export default SideNavigation;
  </code></pre>
  
  <p><strong>My Styles with emotion</strong></p>
  
  <pre><code>import styled from '@emotion/styled';
  
  type HamburguerProps = {
    open: boolean;
  };
  
  export const SideNav = styled('nav')`
    max-width: 250px;
    width: 100%;
    height: 100vh;
    background: #437fb9;
  `;
  
  export const LogoSide = styled('div')`
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    background: #fdca40;
    img {
      height: 50px;
    }
  `;
  
  export const Hamburguer = styled('button')`
    position: absolute;
    left: ${(props: HamburguerProps) =&gt; (props.open ? '250px' : '0')};
  `;
  </code></pre>
  
  <p>and here I have a gif where I render my component, but right after the error appears</p>
  
  <p><a href="https://i.stack.imgur.com/Q3if6.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q3if6.gif" alt="enter image description here"></a></p>