title: How to correct $ mark in CSS file?
body: <p>I have CSS const in my project and then I insert the &quot;$&quot; sign in the last line it shows error. How I can fix it?</p>
  <pre><code>const NavBox = (props: { children: React.ReactNode }) =&gt; { return (
  &lt;div
    css={css`
      display: flex;
      height: 100%;
      justify-content: flex-end;
      align-items: center;
    
      @media (max-width: 768px) {
        flex-direction: column;
        position: fixed;
        width: 100%;
        justify-content: flex-start;
        padding-top: 10vh;
        background-color: #fff;
        transition: all 0.3s ease-in;
        top: 8vh;
        left: ${props =&gt; (props.open ? &quot;-100%&quot; : &quot;0&quot;)};
      }
    `}
    {...props}
  &gt;&lt;/div&gt;
  </code></pre>
  <p>)
  }</p>