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>
}