Как использовать Styled API с машинописью и реквизитом - PullRequest
Новая
       12

Как использовать Styled API с машинописью и реквизитом

0 голосов
/ 12 июня 2019

Я пытаюсь стилизовать компонент (используя новый стиль 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", это не так уж и важно, но я уверен, что делаю что-то не так, есть ли лучший способделать это?

1 Ответ

0 голосов
/ 24 июня 2019

Я использую реквизиты так: 

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