`styled()` breaks flow type checking for props?
See original GitHub issueVersion
styled-components: 2.2.3
flow-typed: styled-components_v2.x.x.js
Reproduction
Running flow on something like this results in styled()
breaking prop type checks:
/* @flow */
import type { ComponentType } from 'react'
import React from 'react'
import styled from 'styled-components'
type Props = {
color: string,
}
const Title: ComponentType<Props> = styled.h1`
color: ${({ color }) => color};
`
const RenderRedTitle = () => <Title color="red">Title</Title> // Expected -- No flow error
const RenderBadTitle = () => <Title color={3}>Title</Title> // Expected -- Flow error
/**************************
* Using `styled() *
**************************/
const StyledTitle = styled(Title)`
font-size: 10px;
`
const RenderRedStyledTitle = () => <StyledTitle color="red">Title</StyledTitle> // Expected -- No flow error
const RenderBadStyledTitle = () => <StyledTitle color={3}>Title</StyledTitle> // Unexpected -- No flow error
Expected Behavior
const RenderBadStyledTitle = () => <StyledTitle color={3}>Title</StyledTitle>
causes a Flow error on color
not being a string.
Actual Behavior
const RenderBadStyledTitle = () => <StyledTitle color={3}>Title</StyledTitle>
does not cause a Flow error.
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (2 by maintainers)
Top Results From Across the Web
Adding Flow type checking to styled-components
I'm trying to get to grips with using styled-components with flow static type checking. This is a footer element I have that is...
Read more >Mastering Props And PropTypes In React - Smashing Magazine
This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props.
Read more >Releases - styled-components
Releases. Updating styled components is usually as simple as npm install . Only major versions have the potential to introduce breaking changes (noted...
Read more >Even Better Support for React in Flow - Medium
Firstly we believe that the new style is more aesthetically pleasing. Often you will create a props type above your component and so...
Read more >Text - React Native
Text supports nesting, styling, and touch handling. ... properties that could inherit from outside of the props would break this isolation.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@sohkai have you tried doing something like this?
save my life! cc @sturmenta