DefinitelyTyped / DefinitelyTyped/DefinitelyTyped
Components created using styled-components with Semantic UI React aren't retaining the SUIR component's props type information
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 51.4k
- Forks
- 30.4k
- Avg merge
- 3d 21h
- Merged PRs (30d)
- 108
Description
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
I have also posted the question here https://stackoverflow.com/q/65160827/19977
Any suggestions for how to surface Semantic UI React props in Styled Components?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and the TypeScript definitions for the Semantic UI React Button and styled-components interaction. Reproduce the example and trace where the Button props are lost when wrapped; done means StyledButton exposes the original props and correctly types onClick and IntelliSense.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100



