'styled ()' функция отбрасывает 'компонент' поддержку проп

Question

Посмотрите на следующий код:

import { styled } from "@material-ui/core/styles";
import ButtonBase from "@material-ui/core/ButtonBase";

const MyButton = styled(ButtonBase)({ color: "red" });

const App = () => (
  <>
    <ButtonBase component="a" />
    <MyButton component="a" />
  </>
);

ButtonBase работает как ожидаемый , но внезапно возникает ошибка из Typescript, говорящая об отсутствии компонента 'prop' MyButton.

Это правильно? Какой обходной путь для этого поведения?

Answer 1

В конце концов, я просто расширил ButtonBaseProps и переопределил некоторые необходимые реквизиты. Это очень простой способ решения проблемы, требующий ручного добавления недостающих реквизитов в интерфейс, но пока он подойдет.

import ButtonBase, { ButtonBaseProps } from "@material-ui/core/ButtonBase";
import { styled } from "@material-ui/core/styles";

export interface MyButtonProps extends ButtonBaseProps {
  component?: any;
}
interface MyButtonAsLinkProps extends MyButtonProps {
  component: "a";
  href: string;
  target?: "_blank";
  rel?: "noopener noreferrer";
}

export const MyButton = withStyles({
  root: {
    color: "red",
  },
})(ButtonBase) as (props: MyButtonProps | MyButtonAsLinkProps ) => React.ReactElement;

Answer 2

Если вы хотите использовать HO C, вы можете использовать withStyles из MaterialUI

Я создал песочницу ЗДЕСЬ

import React from "react";
import "./styles.css";
import { withStyles } from "@material-ui/core/styles";
import ButtonBase from "@material-ui/core/ButtonBase";

const styles = {
  MyButton: {
    color:'red'
  },
};
const MyButton = ({ classes, children, ...rest }) => <ButtonBase className={classes.MyButton} {...rest}>{children}</ButtonBase>;

const MyButtonStyled = withStyles(styles)(MyButton);

const App = () => (
  <>
    <ButtonBase component="a">ASD</ButtonBase>
    <MyButtonStyled component="a">DSA</MyButtonStyled>
  </>
);