IT技术 - 如何使用样式组件设置嵌套功能组件的样式 - 吾爱随笔录

我有以下props按钮- variant，loading和disabled。另外，我有一个按钮组，它接受按钮作为子项并将它们间隔 20px。像这样的东西：

从技术上讲，我在这里有两个组成部分。一个<Button />和一个<ButtonGroup />。这可以通过编写来实现：

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
<ButtonGroup>
  <Button ... />
  <Button ... />
</ButtonGroup>

最后一件事也是这里的主要问题是实现按钮的加载状态。或者一般来说，向样式化组件添加额外的逻辑。所以我所知道的“最佳”方法是创建一个新的功能组件，然后将它包装在另一个样式中。像这样的东西：

// Button.tsx
const StyledButton = styled.buton`...`;

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

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.
  }
`;

当然，它会起作用，但我不确定这是否是最好的方法。目前，如您所见，我通过为最简单的组件调用样式化组件 -> 功能组件 -> 样式化组件来做到这一点。我不确定它将如何与我的其他组件一起扩展，尤其是命名这些组件。

所以我的问题是，有没有更好、更干净、更简单的方法来做到这一点？