typescript - 'styled()' 函数删除了 'component' 道具支持

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 的错误，告诉您没有 'component' prop on MyButton。

它是否正确？这种行为的解决方法是什么？

标签： typescriptmaterial-ui

Answer 1

如果你想使用 HOC，你可以使用withStylesMaterialUI

我在这里创建了一个沙箱

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