title: How to apply marginLeft to a styledcomponent based on condition using react?
body: <p>i have a reusable component AddButton that uses IconButton component. AddButton when has active prop true and marginLeft prop then should apply marginLeft 14px if not 8px.</p>
  <p>AddButton is used in Child1 and Child2 components. Child1 component passes marginLeft prop to the AddButton component.</p>
  <p>below is my code,</p>
  <pre><code>function Child1() {
      return (
          &lt;AddButton marginLeft={14}/&gt; //here marginLeft prop passed
      );
  }
  
   function Child2() {
      return (
          &lt;AddButton /&gt; 
      );
  }
  
  interface AddButtonProps {
      marginLeft?: number;
  }
  
  export const AddButton = ({marginLeft}: AddButtonProps) =&gt; {
      const [saving, setSaving] = React.useState(false);
      const {isDrawing} = useDrawing(item);
  
      return (
          &lt;PrimaryButton active={isDrawing} marginLeft={marginLeft}/&gt;
      );
  };
  
  interface PrimaryButtonProps {
      active?: boolean;
      marginLeft?: number;
  }
  
  const PrimaryButton = (props: PrimaryButtonProps) =&gt; {
      return &lt;PrimaryIconButtonElement {...props} size={16} variant=&quot;primary&quot; /&gt;;
  };
  
  const PrimaryIconButtonElement = styled(IconButton)&lt;{
      $marginLeft?: number;
      $active?: boolean;
  }&gt;`
      width: 32px;
      height: 32px;
      margin-left: ${props =&gt;
          props.$active &amp;&amp; props.$marginLeft ? props.$marginLeft + 'px' : '8px'}; //this doesn't work
  `;
  
  
  function IconButton({active,size,...rest}: Props) {
      return (
          &lt;Wrapper $active={active}&gt;
              &lt;Icon size={size}/&gt;
          &lt;/Wrapper&gt;
      );
  }
  </code></pre>
  <p>now when the active prop is true and marginLeft is passed for AddButton component, then i want the PrimaryButtonElement to have marginLeft 14px.</p>
  <p>but for some reason this style doesnt get applied with the above code.</p>
  <p>Could someone help me fix this. thanks.</p>