Question

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

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

}))

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

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

但这使我失去了“ css属性”中的键入内容，不是什么大问题，但是我很确定自己做错了什么，有没有更好的方法呢？

Answer 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",
}))

如何将带样式的API与打字稿和道具一起使用

1 个答案: