Pass props to rebass Button component with typescript is not working

[yokiijay]

Here is the higher component I built based on rebass Button

Can't pass props to Button if I give ButtonProps to Btn, is there any way to do that?

import { FC } from 'react'
import { Button, ButtonProps } from 'rebass'

const Btn: FC<ButtonProps> = ({...props}) => {
  return(
    <Button {...props}></Button>
  )
}

export default Btn

[yokiijay]

Right now, I can only import separate props from styled-system one by one to make it work.

import { FC } from 'react'
import { Button, ButtonProps } from 'rebass'
import { ColorProps, SpaceProps, LayoutProps } from 'styled-system'

const Btn: FC<ColorProps & SpaceProps & LayoutProps> = ({...props}) => {

  return(
    <Button {...props}></Button>
  )
}

export default Btn

[Howard86]

I think you are missing the children from FC

The following works well for myself.

import React, { FC } from 'react';
import { Button as RebassButton, ButtonProps } from 'rebass';

const Button: FC<ButtonProps> = (props) => {
  const { children, ...rest } = props;
  return <RebassButton {...rest}>{children}</RebassButton>;
};

export default Button;

(Edit: I have removed React.memo part as it's irrelevant to the question)

[mneghin]

Recently I faced the same problem as well. A solution would be to destructure css property { children, css, ...props }