score:2

Accepted answer
type ButtonProps = {
  color: "white" | "green";
  fontSize: string;
};

const Button: FunctionComponent<Partial<ButtonProps>> = ({
  // First way to define default value
  children,
  ...styleProps
}) => <ButtonContainer {...styleProps}>{children}</ButtonContainer>;

const ButtonContainer = styled.button<ButtonProps>`
  background-color: ${(props: ButtonProps) => props.color};
  font-size: ${(props: ButtonProps) => props.fontSize};
`;

const App: FunctionComponent = () => (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
    <Button color='green'>hello world</Button>
  </div>
);

score:1

const Button: FunctionComponent<ButtonProps> = ({
  // First way to define default value
  color = "green",
  children
}) => <ButtonContainer>{children}</ButtonContainer>;

Related Query

More Query from same tag