Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better flow support? #570

Closed
DarrylD opened this issue Mar 9, 2017 · 7 comments

Comments

@DarrylD
Copy link

@DarrylD DarrylD commented Mar 9, 2017

Based on #240

Currently something like this works

/* @flow */
import React from 'react';
import styled from 'styled-components';

type Props = {
  bold?: bool,
};

const Text = styled.span`
  color: ${props => props.theme.colors.black};
  font-family: ${props => props.theme.fontFamily};
  font-size: ${props => props.theme.fontSize.text};
  font-weight: ${props => props.bold ? props.theme.fontWeight : 'normal'};
  line-height: ${props => props.theme.lineHeight};
`;

export default (props: Props) => <Text {...props} />;

Would it be better if we could do something like so?

Props = {
  bold?: bool,
};

const default Text = styled.span(Props)`
  color: ${props => props.theme.colors.black};
  ...
`;

//or

const default Text = styled.span({bold?: bool})`
    color: ${props => props.theme.colors.black};
  ...
`;

Just kinda annoying to make another stateless. Thoughts?

@mxstbr

This comment has been minimized.

Copy link
Member

@mxstbr mxstbr commented Apr 1, 2017

@relekang

This comment has been minimized.

Copy link
Member

@relekang relekang commented Apr 1, 2017

I plan to look into this for the flow-typed libdef, I don't have any great ideas so far tho. Also, relevant discussions in flow-typed/flow-typed#745

@malekjaroslav

This comment has been minimized.

Copy link

@malekjaroslav malekjaroslav commented Sep 26, 2017

This would be really great. I managed to make it work by this:

//@flow
import styled from 'styled-components';
import type { ComponentType } from 'react';

const Text: ComponentType<{bold: boolean, style: Object}> = styled.span`
   font-weight: ${props => props.bold ? props.theme.fontWeight : 'normal'};
`

But then I have an issue with .extend and other methods.

@Sjiep

This comment has been minimized.

Copy link

@Sjiep Sjiep commented Jan 10, 2018

Are there any new thoughts on this topic? I'm struggling to make props for a styled-component work properly together with Flow. The workaround provided by @malekjaroslav works however this breaks:

  • the usage of defaultProps,
  • props showing up properly in react-styleguidist.

I still use the workaround given in the original post

@breadadams

This comment has been minimized.

Copy link
Member

@breadadams breadadams commented May 15, 2018

@malekjaroslav I'm getting the same, over a year later 😢. I've tried with the latest flow-typed libdef but still no avail.

@kusmierz

This comment has been minimized.

Copy link

@kusmierz kusmierz commented Oct 24, 2018

Hey, is there any major changes between 3 and 4 version? Could we use https://github.com/flow-typed/flow-typed/tree/master/definitions/npm/styled-components_v3.x.x definitions for 4.x?

@probablyup

This comment has been minimized.

Copy link
Contributor

@probablyup probablyup commented Oct 24, 2018

Several. Someone will need to contribute the changes, as the core team doesn't maintain the typings.

@probablyup probablyup closed this Nov 12, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.