title: styled components styled overriden by thrid party (antd) style
body: <p>I've got a simple styled-components that is being applied to an antd component:</p>
  
  <pre><code>import { Card } from 'antd';
  
  export const UsageCard = styled(Card)`
  
    box-shadow: 1px 1px;
    padding: 2px;
  `
  </code></pre>
  
  <p>This creates a div with a class attribute that looks like : "ant-card edit-style__UsageCard-jsklqS hBLsXc ant-card-bordered"</p>
  
  <p>Where .hBLsXc is my styled-component. Unfortunately the padding which is 2px in my styled-componentn gets overriden by the ant-card (0px).</p>
  
  <p>Any idea why this is happening? The styled-components is supposed to come first since it's implemented over the thrid-party component. Is this a problem with the forwarding of className from third-party component I've read on multiple occasion? In any case, I don't really gets how this is supposed to work.</p>
  
  <p>Thanks for your help!</p>