‘'styled()’function prop 'component‘prop支持

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以expected的身份工作，但是突然有一个来自Typescript的错误，它告诉我们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

如果你想使用HOC，你可以使用MaterialUI中的withStyles

我创建了一个沙盒HERE

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>
  </>
);