Question

说我有一个定义如下的按钮：

interface ButtonProps {
  color?: string;
  size?: string;
}

const Button = styled("button")<ButtonProps>``;

然后我想在另一个组件中使用它。如何访问styled-components为button组件添加的所有道具。

我知道我可以做这样的事情，但是随着组件变得越来越复杂，我觉得它变得非常混乱。

const ButtonGroup = (
  props: ButtonProps & React.HTMLAttributes<HTMLButtonElement>
) => (
  <div>
    <Button {...props}>Hello</Button>
    <Button {...props}>Hello</Button>
  </div>
);

这是我到目前为止尝试过的：

const ButtonGroup: React.FunctionComponent<typeof Button> = props => (
  <div>
    <Button {...props}>Hello</Button>
    <Button {...props}>Hello</Button>
  </div>
);

const ButtonGroup = (props: typeof Button) => (
  <div>
    <Button {...props}>Hello</Button>
    <Button {...props}>Hello</Button>
  </div>
);

修改：

只是发现了这一点，但如果有人有更清洁的解决方案，请随时分享。

const ButtonGroup = (props: React.ComponentProps<typeof Button>) => (
  <div>
    <Button {...props}>Hello</Button>
    <Button {...props}>Hello</Button>
  </div>
);

样式化组件的访问界面

0 个答案: