score:2

Accepted answer
import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  ........your other styles........
  additionalStyles: props => ({
    ...props
  }),
});

const MediumButton = props => {
  const { additionalStyles, color } = props;
  const classes = useStyles(additionalStyles);

  return (
    <div>
      {color === "blue" ? (
        <button className={`${classes.buttonBlue} ${classes.additionalStyles}`}>
          {props.buttonText}
        </button>
      ) : (
        <button className={`${classes.buttonWhite} ${classes.additionalStyles}`}>
          {props.buttonText}
        </button>
      )}
    </div>
  );
};

export default MediumButton;

score:5

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/styles";

import MediumButton from "./MediumButton";

const useStyles = makeStyles({
  homeButton: {
    background: "white",
    color: "#09a1e2",
    border: "1px solid #09a1e2",
    padding: ".5rem 3.25rem .5rem 3.25rem",
    textDecoration: "none",
    "&:hover": {
      backgroundColor: "#ffffff",
      color: "#09a1e2"
    }
  }
});
function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <MediumButton onClick={() => alert("You clicked me!")}>
        White Button
      </MediumButton>
      <MediumButton color="blue">Blue Button</MediumButton>
      <MediumButton className={classes.homeButton}>Home Button</MediumButton>
      <MediumButton className={classes.homeButton} color="blue">
        Blue Home Button
      </MediumButton>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related Query

More Query from same tag