Reactjs 如何使用材质UI按钮在Typescript函数上实现道具类型？

首先，我的借口是，如果我没有正确表达自己，我仍然对打字感到有点困惑

我有一个来自Material UI的样式化按钮，我不知道如何在整个应用程序中重复使用这个按钮。我基本上希望按钮接收一个道具，比如

{buttonext}

等等，这样我就可以在多个页面中使用它，但标签不同

import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';

const useStyles = makeStyles({
  backButton: {
    background: 'linear-gradient(45deg, #9AA5B0 30%, #9AA5B0 90%)',
    border: 0,
    borderRadius: 25,
    boxShadow: '0 2px 4px rgba(0, 0, 0, .5)',
    color: 'white',
    fontFamily: 'Poppins, sans-serif',
    fontSize: 15,
    height: 37,
    padding: '0 20px',
    textTransform: 'none',
  },
});

export default function BackButton(): React.ReactElement {
  const classes = useStyles();
  return (
    <Button className={classes.backButton} startIcon={<ChevronLeftIcon />}>
      {buttonText}
    </Button>
  );
}

从'@materialui/core/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
const useStyles=makeStyles({
后按钮：{
背景：“线性梯度（45度，#9AA5B0 30%，#9AA5B0 90%）”，
边界：0，
边界半径：25，
boxShadow:'0 2px 4px rgba（0,0,0,5）'，
颜色：'白色'，
fontFamily:“罂粟花，无衬线”，
尺寸：15，
身高：37，
填充：“0 20px”，
textTransform:“无”，
},
});
导出默认函数BackButton（）：React.ReactElement{
const classes=useStyles（）；
返回(
{buttonText}
);
}

因此，当我在另一个页面中插入按钮组件时，我可以给道具一个值，然后正确的标签就会显示在我的按钮上

<div>
  <PrimaryButton />
  <BackButton label={buttonText}/>
</div>

关于如何使用类型来实现这一点，有什么建议吗

---

非常感谢

首先，组件BackButton需要接受道具

然后为道具创建一个类型：

export type BackButtonProps = {
  label: string;
};

并添加到BackButton组件中：

export type BackButtonProps = {
  label: string; // or buttonText
  // ...other props
};

export default function BackButton(props: BackButtonProps) {
  const classes = useStyles();
  return (
    <Button className={classes.backButton} startIcon={<ChevronLeftIcon />}>
      {props.label}
    </Button>
  );
}

导出类型BackButtonProps={
标签：string；//或buttonText
//…其他道具
};
导出默认函数BackButton（道具：BackButtonProps）{
const classes=useStyles（）；
返回(
{props.label}
);
}

现在，你的背部按钮有一个类型的道具

使用：

<BackButton label="Custom Label" />

如果库中的按钮具有内部类型，则可以扩展此类型，这样您的类型将通过继承拥有所有属性：

从“物料ui”导入{AnyExistingType}

export-type BackButtonProps=AnyExistingType&{label:string}
并非所有英雄都戴斗篷。非常感谢。我终于明白这些类型是如何工作的了！