title: Styling nested components using styled components
body: <p>I've been using styled components for very little time.</p>
  
  <p>At the moment I'm trying to do a style override on a nested element and I've having trouble understanding what I'm doing wrong.</p>
  
  <p>So my struture is.</p>
  
  <p>---------------------------Form.js---------------------------</p>
  
  <pre><code>import { FieldWrapper } from './FieldWrapper';
  
  const Form = styled.form`
      /** my form styles **/
  `;
  
  const StyledFieldWrapper = styled(FieldWrapper)`
      /** my FieldWrapper styles **/
  
      input {
          /** input overrides **/
          padding-bottom: 0.8rem;
          height: 2rem;
          line-height: 2rem;
          box-sizing: content-box;
          background-color: pink !important; // added just for visibility
      }
  `;
  
  const MyForm = props =&gt; {
      return (
          &lt;&gt;
              &lt;Form&gt;
                  &lt;StyledFieldWrapper /&gt;
              &lt;/Form&gt;
          &lt;/&gt;
      );
  }
  
  export { MyForm }
  </code></pre>
  
  <p>---------------------------FieldWrapper.js---------------------------</p>
  
  <pre><code>const Div = styled.div`
      /** my div styles **/
  `;
  
  const Label = styled.label`
      /** my label styles **/
  `;
  
  const Input = styled.input`
      /** my input styles **/
  `;
  
  const FieldWrapper = props =&gt; {
      return (
          &lt;Div&gt;
              &lt;Label&gt;
                  &lt;Input /&gt;
              &lt;/Label&gt;
          &lt;/Div&gt;
      );
  }
  
  export { FieldWrapper }
  </code></pre>
  
  <p>Now what I expect to happen was that the styles in <code>FieldWrapper.js</code> would be overriden by the <code>StyledFieldWrapper</code> element in <code>Form.js</code>, this however does not happen and I have no idea why. I have overrides like this in the past and in this project. Also <code>StyledFieldWrapper</code> does not contain only overrides, it also has style of its own and I can't even see those.</p>
  
  <p>Has anyone had a similar issue?</p>
  
  <p>NOTE: I have tried to use the solution in <a href="https://stackoverflow.com/questions/59738188/styling-nested-components-in-styled-components">Styling Nested Components in Styled-Components</a> with no success.</p>