Reactjs 如何在react应用程序中重用自定义材质ui按钮？

我正在开发我的第一个React应用程序。我导入了一个材质ui按钮，并对其进行了自定义

现在我想在我的应用程序的几个组件中重用这个自定义按钮。每次使用此自定义按钮时，我都需要不同的文本

我需要在哪里为每个按钮编写此特定文本

我的按钮在其他组件中导入时可见，但我看不到我在按钮组件中写入的文本。按钮是空的

我的自定义按钮组件：MyButton:

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

const styles = () => ({
  button: {
    margin: 50,
    padding: 10,
    width: 180,
    fontSize: 20
  }
});

function MyButton(props) {
  const { classes } = props;
  return (
    <Button variant="contained" color="primary" className={classes.button}>
      <b>  </b>
    </Button>
  );
}

export default withStyles(styles)(MyButton);

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/styles”导入{withStyles}”；
常量样式=（）=>({
按钮：{
差额：50，
填充：10，
宽度：180，
尺寸：20
}
});
功能按钮（道具）{
常量{classes}=props；
返回(
);
}
导出默认样式（样式）（MyButton）；

导入MyButton组件的另一个组件：Home:

import React from "react";
import "../App.css";
import MyButton from "./Button";

function Header() {
  return (
    <header className="Header">
      {/* background image in css file */}
      <h1>Welcome </h1>
      <h3> description...</h3>
      <MyButton>Play now</MyButton>
    </header>
  );
}

export default Header;

从“React”导入React；
导入“./App.css”；
从“/Button”导入MyButton；
函数头（）{
返回(
{/*css文件中的背景图像*/}
欢迎
描述
现在玩
);
}
导出默认标题；

---

我希望按钮显示“立即播放”（Play now），但现在它保持为空（）。

将按钮文本作为道具传递给按钮组件

<MyButton text="Play now"></MyButton>

然后在MyButton组件中，您可以像

  function MyButton(props) {
   const { classes,text } = props;
    return (
     <Button variant="contained" color="primary" className={classes.button}>
       <b> {text} </b>
      </Button>
    );
  }

功能按钮（道具）{
const{classes，text}=props；
返回(
{text}
);
}

此外，我还找到了另一种解决方案，可以直接在每个按钮（MyButton的子按钮）中写入文本，并在需要时对其进行自定义

将“children”关键字作为“props”传递给MyButton组件：

function MyButton(props) {
  const { classes, children } = props;
  return (
    <Button variant="contained" color="primary" className={classes.button}>
      <b>{children}</b>
    </Button>
  );
}

功能按钮（道具）{
const{classes，children}=props；
返回(
{儿童}
);
}

然后将按钮的文本写入按钮内，就像在html中一样：

<MyButton> Play now </MyButton>

立即播放

如果您将所有道具传递到包装好的

按钮

，您将从自定义

按钮中获得最大的灵活性。这将自动处理
子对象
和
类
，只要在
样式
对象中使用与包装组件支持的类键

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

const styles = () => ({
  root: {
    margin: 50,
    padding: 10,
    width: 180,
    fontSize: 20,
    fontWeight: "bold"
  }
});

function CustomButton(props) {
  return <Button variant="contained" color="primary" {...props} />;
}

export default withStyles(styles)(CustomButton);

谢谢你的清晰解决方案，它正在工作。另外，我还发现了另一个解决方案，其中“children”关键字作为“道具”传递给我的按钮组件。通过这种方式，我可以直接在按钮中写入文本，并在需要时进行自定义。欢迎使用。是的，这是另一种处理儿童道具的方式。
function CustomButton({children, ...other}) {
  return <Button variant="contained" color="primary" {...other}><b>{children}</b></Button>;
}