Better flow support?

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?

[malekjaroslav]

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]

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