Javascript 为样式化组件道具使用流

因此，我一直在使用JavaScript中的类型系统，大部分情况下都可以正常工作，但是样式化组件存在一个问题。我似乎找不到一个好方法来将流应用到一个样式化组件的道具上。到目前为止，我看到的唯一解决方案是：

export type ButtonPropTypes = ReactPropTypes & {
  styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
  isPill: boolean,
  isThin: boolean,
};

export const ButtonStyled = styled.button`
  ${generateBaseStyles}
  ${hoverStyles}
  ${fillStyles}
  ${thinStyles}
  ${linkStyles}
`;

export const Button = (props: ButtonPropTypes) => <ButtonStyled {...props} />;

导出类型按钮optypes=ReactPropTypes&{
样式类型：“安全”|“信息”|“警告”|“危险”|“链接”，
isPill:boolean，
isThin:布尔，
};
export const ButtonStyled=styled.button`
${generateBasystyles}
${hoverStyles}
${fillStyles}
${thinStyles}
${linkStyles}
`;
导出常量按钮=（道具：按钮类型）=>；

我必须为每个样式化的组件创建2个组件，这似乎太过分了

---

我希望我的谷歌技能只是垃圾，我错过了一些东西，但是除了每个样式的组件有多个组件之外，还有更好的方法吗？

是的！有更好的办法。诀窍是声明由样式化组件创建的组件的类型。您可以通过

styled.button`.`

返回的结果来实现这一点，返回的结果是接收所需道具的React组件的类型。您可以使用

type mytype=React.ComponentType

生成接受任意道具的React组件类型

/@flow
从“样式化组件”导入样式化
//请确保使用*导入，以便也导入类型
从“React”导入*作为React
//使用styleType的Mock函数
const makeStyles=（{styleType}）=>“”
导出类型按钮复制类型={
样式类型：“安全”|“信息”|“警告”|“危险”|“链接”，
isPill:boolean，
isThin:布尔，
};
导出常量按钮样式=（styled.button`
${makeStyles}
${（{isPill}）=>isPill？显示：块；'：''}
${（{isThin}）=>isThin？高度：10px；'：'高度：100px；'}
`：React.ComponentType）//演员阵容如下
常数校正用法=
const CausesError=//错误
const CausesError2=//错误

我已经在GitHub上托管了用于本地复制的代码（因为Flow的沙盒不能与外部依赖项一起工作）：

除了answer之外，如果您使用的是

流类型的

（并且已经为您的

样式化组件的版本安装了包），那么您基本上可以：

import styled, {type ReactComponentStyled} from 'styled-components'

type Props = {
 color?: string
}

const Button: ReactComponentStyled<Props> = styled.button`
  color: ${({color}) => color || 'hotpink'};
`

import styled，{type ReactComponentStyled}来自'styled components'
类型道具={
颜色？：字符串
}
常量按钮：ReactComponentStyled=styled.Button`
颜色：${（{color}）=>color | | hotpink'}；
`
存在此问题，但没有有用的注释，您也可以使用：
导出常量按钮样式：React.ComponentType=…
我不知道从“bar”导入{type foo}

语法！另外，这是一个更好的答案。它确实有它的警告（），我最终得到了一个稍微粗糙的解决方案，能够使用

.extend

，

.attrs

，而无需流抱怨

样式化组件中没有ReactComponentStyled导出

：导出是否重命名为新的4.x.x版本？可以是@robinmetral，这是使用

\u v3.x.x

import styled, {type ReactComponentStyled} from 'styled-components'

type Props = {
 color?: string
}

const Button: ReactComponentStyled<Props> = styled.button`
  color: ${({color}) => color || 'hotpink'};
`