title: What is the best way to apply layout styling to styled-components and React components used in different places on a site?
body: <p>I have React components and styled components that are used throughout my site. For example, buttons and cards. I have heard that using inline styling is a code smell and should be avoided.</p>
  
  <p>However, to get stuff to look beautiful, css (particularly margins, padding and dimensions) still need to be applied to the components on a case by case basis.</p>
  
  <p>I can see a number of options for this:</p>
  
  <ul>
  <li>Create compound components , each for use in different places e.g.
  <code>Card, Card.Padded, Card.Large</code></li>
  <li><p>Create (potentially several) new components with different based on
  the ‘base’ component using styled components e.g. <code>styled(Card)</code>
  to create CardCharacters CardHomePage etc</p></li>
  <li><p>Use props to change the styling where different styles are needed
  e.g. <code>&lt;Card withSomeMargins /&gt;</code> or <code>&lt;Card margin={big} /&gt;</code></p></li>
  <li><p>Use different ThemeProviders on each page to apply styling to the
  components</p></li>
  </ul>
  
  <p>Can anyone give any advice on which approach(es) are ‘best-practice’ or preferred? I’m aware that different approaches might be better for different situations and there might not be a ‘best’ approach but I’m interested to hear people’s thoughts.</p>