Components created using styled-components with Semantic UI React aren't retaining the SUIR component's props type information

[ryanewtaylor]

Caveat. I am not sure this is an appropriate place to post this question. I have posted it on

DefinitelyTyped and Stack Overflow and Spectrum. I have been unable to find an answer to this and so I am hoping someone here may see this and know of a workaround.

If this is closed as inappropriate for this site no feelings will be hurt.

---

Components created using styled-components with Semantic UI React aren't retaining the props types from the original SUIR component.

Without styled-components

Without styled-components the SUIR components props type information is retained.

import { Button } from "semantic-ui-react";
<Button onClick={(e) => alert("hi")}>Submit</Button>

onClick is typed as

onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, data: ButtonProps) => void) | undefined

Intellisense will then show me the available props in Visual Studio Code and their type.

With styled-components

When I use styled-components the type information for the SUIR component's props is lost.

import styled from "styled-components";
import { Button } from "semantic-ui-react";

const StyledButton = styled(Button)`
  color: red !important;
`;

<StyledButton onClick={(e) => alert("hi")}>Submit</StyledButton >

onClick is now inferred from the function I assigned it and is typed as ...

onClick?: (e: any) => void

Intellisense cannot find the available props nor the appropriate type

I tried providing the props type to the styled component as shown below, but it had no effect.

const StyledSUIRButton = styled(Button)<ButtonProps>`
  color: red !important;
`;

Props for my own custom function and class components work fine, so I am a bit baffled. There is something about the intersection of SUIR and styled-components that is causing the type information for the props to be lost.

Here is a live example demonstrating the issue https://codesandbox.io/s/styled-components-removes--giv1m

Any suggestions for how to surface Semantic UI React props in Styled Components?

[MonstraG]

I think you can use

import { Button, ButtonProps } from "semantic-ui-react";

const StyledButton = styled(Button)<ButtonProps>`
  color: red !important;
`;