title: How to pass marginBottom to a styled component?
body: <p>I have the following ui-component: </p>
  
  <pre><code>const StyledLabel = styled.div`
    color: ${(props) =&gt; props.theme.colors.black};
  `;
  
  const Label = ({
    text,
    marginBottom,
  }) =&gt; (
    &lt;StyledLabel
      style={{ marginBottom }}
    &gt;
      {text}
    &lt;/StyledLabel&gt;
  );
  </code></pre>
  
  <p>What I want to do is remove the style attribute and have styled-components handle margin-bottom... So I now have:</p>
  
  <pre><code>const StyledLabel = styled.div`
    color: ${(props) =&gt; props.theme.colors.black};
    margin-bottom: ${(props) =&gt; props.marginBottom};
  `;
  
  const Label = ({
    text,
    marginBottom,
  }) =&gt; (
    &lt;StyledLabel
      marginBottom={marginBottom}
    &gt;
      {text}
    &lt;/StyledLabel&gt;
  );
  </code></pre>
  
  <p>The problem with the above is the CSS being applied to the element is:</p>
  
  <pre><code>margin-bottom: 8;
  </code></pre>
  
  <p>Not the desired <code>8px</code> -- Can I get styled-components to magically add the <code>px</code> the way <code>style</code> does? Or do I need to update my app from passing marginBottom <code>8</code> to <code>8px</code> ?</p>