如何使用样式组件设置嵌套功能组件的样式

Question

我有以下道具按钮- 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.
  }
`;

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

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

Answer 1

我没有看到三个组件的原因，对我有用的模式是使用点表示法：

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

Button.Styled = StyledButton;
export default Button;

通过这种方式，您就拥有了一个模式Component.Styled（如果可用）将始终保存您可以定位的运行时 CSS-in-JS 对象。

然后在ButtonGroup实现中：

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} .../>