title: Pass a variable in a styled-components in React
body: <p>I try to pass a variable in a component that uses styled-components</p>
  <p>This is how I call the component</p>
  <pre><code>&lt;td&gt;&lt;p&gt;&lt;LimitBar width = {perc}/&gt; {perc}%&lt;/p&gt;&lt;/td&gt;
  </code></pre>
  <p><code>perc</code> is a number between 0 and 100</p>
  <p>Then, the LimitBar is like this</p>
  <pre><code>const LimitBarBorder = styled.span`
        ...some css
  `;
  
  const LimitBarColored = styled.span`
          ...some more css
          width: ${props =&gt; props.width};
      `;
  
  const LimitBar = (width) =&gt; (
        &lt;LimitBarBorder&gt;
          &lt;LimitBarColored width={width}&gt;&lt;/LimitBarColored&gt;
        &lt;/LimitBarBorder&gt;
      );
  
  export default LimitBar;
  </code></pre>
  <p>But, then, the HTML code is like this</p>
  <pre><code>&lt;td&gt;
      &lt;p&gt;
          &lt;span class=&quot;sc-pHKzq izKVhe&quot;&gt;
              &lt;span width=&quot;[object Object]&quot; class=&quot;sc-pQFoF bkUWrD&quot;&gt;&lt;/span&gt;
          &lt;/span&gt; 85%
      &lt;/p&gt;
  &lt;/td&gt;
  </code></pre>
  <p>As you can see, the width parameter passed as object, while it is just a number. I am new on React and try to do it with online tutorials and official documentations.</p>