styled-components don't work with Tab.js
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.1k
- Forks
- 455
- Avg merge
- 5h 9m
- Merged PRs (30d)
- 2
Description
It's not possible to customize Tab.js with styled-components (https://github.com/styled-components/styled-components) because of this line in Tab.js:
if (child.type !== _Tab2.default) {
return child;
}
if you customize the styling with styled-components,
const StyleTab = styled(Tab)`
background-color : ${props => props.selected? 'white' : 'transparent'};
`;
child.type will no longer be Tab but StyleTab
I also don't understand why this check is here?
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 in Tab.js at the child.type check described in the report, then reproduce the styled-components example to understand how customized tabs are handled. Done means styled Tab components can be customized without being rejected, while the existing tab behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100