title: How to reuse a Custom Material-ui button inside a react-app?
body: <p>I'm developing my first React app. I've imported a Material-ui button and I've customized it. </p>
  
  <p>Now I want to reuse this custom button in several components of my app. I want a different text for each time I use this custom button. </p>
  
  <p>Where do I need to write this specific text for each button? </p>
  
  <p>My button is visible when I import it in other components, but I can't see the text I wrote inside the button component. The button stays empty. </p>
  
  <p>My custom button component : MyButton:</p>
  
  <pre><code>import React from "react";
  import Button from "@material-ui/core/Button";
  import { withStyles } from "@material-ui/core/styles";
  
  const styles = () =&gt; ({
    button: {
      margin: 50,
      padding: 10,
      width: 180,
      fontSize: 20
    }
  });
  
  function MyButton(props) {
    const { classes } = props;
    return (
      &lt;Button variant="contained" color="primary" className={classes.button}&gt;
        &lt;b&gt;  &lt;/b&gt;
      &lt;/Button&gt;
    );
  }
  
  export default withStyles(styles)(MyButton);
  </code></pre>
  
  <p>The other component where I import MyButton component : Home : </p>
  
  <pre><code>import React from "react";
  import "../App.css";
  import MyButton from "./Button";
  
  function Header() {
    return (
      &lt;header className="Header"&gt;
        {/* background image in css file */}
        &lt;h1&gt;Welcome &lt;/h1&gt;
        &lt;h3&gt; description...&lt;/h3&gt;
        &lt;MyButton&gt;Play now&lt;/MyButton&gt;
      &lt;/header&gt;
    );
  }
  
  export default Header;
  </code></pre>
  
  <p>I expect the button to show "Play now" (<a href="https://i.stack.imgur.com/FEJmN.png" rel="nofollow noreferrer">expected output</a>) but for now it stays empty (<a href="https://i.stack.imgur.com/Ql08I.png" rel="nofollow noreferrer">actual output</a>).</p>