[Solved]-How to style a nested functional component using styled components-Reactjs

I don't see a reason for three components, a pattern that works for me is using dot notation:

const StyledButton = styled.button``;
const Button = (props) => {
  return (
    <StyledButton className={props.className}>
      {props.loading && <LoadingSpinner />}
      {props.children}
    </StyledButton>
  );
};

Button.Styled = StyledButton;
export default Button;

In this way, you have a pattern where Component.Styled (if available) will always hold the runtime CSS-in-JS object which you can target.

Then in ButtonGroup implementation:

import { Button } from "@components";

// You can target the className
const ButtonGroup = styled.div`
  ${Button.Styled} { ... }
`;

// You can apply styles
styled(Button)

// You can use the component
<Button />

// Or extend style etc
<OtherButton as={Button.Styled} .../>