title: How to style a nested functional component using styled components
body: <p>I have a button with the following props - <code>variant</code>, <code>loading</code>, and <code>disabled</code>. Plus, I have a button group that accepts buttons as children and gaps them with 20px. Something like this:</p>
  <p><a href="https://i.stack.imgur.com/VG7ip.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VG7ip.png" alt="Button specification" /></a></p>
  <p>Technically speaking, I have two components here. A <code>&lt;Button /&gt;</code> and a <code>&lt;ButtonGroup /&gt;</code>. This would be achievable by writing:</p>
  <pre class="lang-js prettyprint-override"><code>const Button = styled.button`
    // css implementation
  
    :disabled {
      opacity: 0.5;
    }
  `;
  
  const ButtonGroup = styled.button`
    // css implementation
  
    ${Button} + ${Button} {
      margin-inline-start: 20px;
      // PS - I'm aware I could use the `gap` property, but I'm not specifically talking about this example, but in general.
    }
  `;
  
  // Usage
  &lt;ButtonGroup&gt;
    &lt;Button ... /&gt;
    &lt;Button ... /&gt;
  &lt;/ButtonGroup&gt;
  </code></pre>
  <p>The last thing and the main issue here is to implement the loading state of the button. Or in general, adding extra logic to the styled component. So the &quot;best&quot; way I know of is to create a new functional component and then wrap it inside another styled. Something like this:</p>
  <pre class="lang-js prettyprint-override"><code>// Button.tsx
  const StyledButton = styled.buton`...`;
  
  const Button = (props) =&gt; {
    return (
      &lt;StyledButton className={props.className}&gt;
        {props.loading &amp;&amp; &lt;LoadingSpinner /&gt;}
        {props.children}
      &lt;/StyledButton&gt;
    );
  }
  
  export default styled(Button)``; // It's needed for for nested styling.
  
  ...
  
  // ButtonGroup.tsx
  const ButtonGroup = styled.button`
    // css implementation
  
    ${Button} + ${Button} {
      margin-inline-start: 20px;
      // PS - I'm aware I could use the `gap` property, but I'm not specifically talking about this example, but in general.
    }
  `;
  </code></pre>
  <p>It will work, of course, but I'm not sure if it's the best way. Currently, as you can see, I did it by calling styled component -&gt; function component -&gt; styled component for the simplest component. I'm not sure how it will scale with my other components, especially naming these components.</p>
  <p>So my question is, is there a better, cleaner, simpler way of doing this?</p>