如何将 Styled API 与 typescript 和 props 一起使用答案

【问题标题】：How to use Styled API with typescript and props如何将 Styled API 与 typescript 和 props 一起使用
【发布时间】：2019-06-12 15:17:36
【问题描述】：

我正在尝试为组件设置样式（使用新的样式化 api，不要与 StyleComponents 混淆）。

const FixedWidthCell = styled(TableCell)((props: { width: number }) => ({
  width: props.width || 20,
  textAlign: "center",

}))

问题是 TS 在使用时抱怨宽度不是组件道具的一部分。我的解决方法是：

const FixedWidthCell = styled(TableCell)((props: { width: number }) => ({
  width: props.width || 20,
  textAlign: "center",
})) as React.ComponentType<TableCellProps & { width?: number }>;

但这让我失去了“css属性”中的打字，这不是什么大事，但我很确定我做错了什么，有没有更好的方法呢？

【问题讨论】：

能否请您添加指向新样式 API 文档的链接。
@ShaunLuttin 这里是：material-ui.com/styles/api/…

标签： typescript material-ui

【解决方案1】：

我使用这样的道具：

const MyCard = styled(({backgroundColor, color, ...other}) => <Card {...other}/>)({
  height: '100%',
  backgroundColor: props => props.backgroundColor,
  color: props => props.color,
});

所以对于您的示例，这应该可以：

const FixedWidthCell = styled(({width, ...other}) => <TableCell{...other}/>)({
  width: props => props.width ? props.width : 20,
  textAlign: "center",
}))

【讨论】：