How to make different styles using makeStyles in React JS Material-UI?

Question

I am beginner to React JS and Material UI.

I am trying to make different styles of buttons. For example if the button attribute name= submit,ok,cancel,confirm,alert, those each button's styles should be differ from one another

App.JS

import CssButton  from './controls/Buttons/Button'

function App() {
  return (
    <div className="App">
      <CssButton name="btnSubmit"/> //button style to be changed based on 'name'
    </div>
  );
}

Button.JS

const useStyles = makeStyles({

    btnSubmit: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        height: 48,
        padding: '0 30px',
    },
    ok:{
        background: 'blue',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        height: 48,
        padding: '0 30px',
    }
});

function CssButton(props) {
   const classes = useStyles(props);
   return<Button className={classes.btnSubmit}>{props.name}</Button>;
   //return <button className={`classes.${ props.name }`}>   --is it possible pass the props value something like this?
   // {props.name}
   //</button>
}

Answer 1

You should do this:

const useStyles = makeStyles({

    btnSubmit: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        height: 48,
        padding: '0 30px',
    },
    ok:{
        background: 'blue',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        height: 48,
        padding: '0 30px',
    }
});

function CssButton(props) {
   const classes = useStyles(props);
   return(
     <Button className={classes[props.name]}>
       {props.name}
     </Button>
   );
}