DefinitelyTyped / DefinitelyTyped/DefinitelyTyped

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

Open
#49,962 1 comment 0 reactions 0 assignees View on GitHub

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.

Display onClick prop

Display type information for onClick

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

Cannot see available props

Incorrect (inferred) 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.