Использование Typescript со стилизованными компонентами и пользовательским интерфейсом материала

Question

Используя Typescript с MUI + Styled-Components, и вам придется напрямую передавать реквизиты элементам MUI из-за ошибок типа ... Type '{children: string;вариант: «содержится»;} «нельзя назначить типу» (IntrinsicAttributes & Pick>) |PropsWithChildren, "форма" |"стиль" |"название" |... еще 284 ... |"option"> & Partial <...>, "form" |... еще 286 ... |"вариант"> & {...;} & {...;}) |(IntrinsicAttributes & ... 3 more ... & {...;}) '

Когда вы напрямую передаете реквизиты, такие как ниже, эта ошибка исчезает.Даже используя 0 реквизитов и 0 потомков в элементе Styled MUI, выдает ошибку.

const StyledButton = styled(props => <Button {...props} />)`
  background: red;
  color: white;
`;

Answer 1

Это должно хорошо работать с MUI> = 4. *

Для более ранних версий, начиная с этого урока , попробуйте принудительно установить тип StyledButton:

const StyledButton = styled(Button)`
  background: red;
  color: white;
` as typeof(Button);