question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`styled()` breaks flow type checking for props?

See original GitHub issue

Version

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:closed
  • Created 6 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
alejandrodnmcommented, Mar 22, 2018

@sohkai have you tried doing something like this?

const StyledTitle: typeof Title = styled(Title)`
  font-size: 10px;
`
0reactions
javi10823commented, Jul 11, 2019

@sohkai have you tried doing something like this?

const StyledTitle: typeof Title = styled(Title)`
  font-size: 10px;
`

save my life! cc @sturmenta

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found