Soy principiante en React JS y Material UI.

Estoy tratando de hacer diferentes estilos de botones. Por ejemplo, si el nombre del atributo del botón = enviar, aceptar, cancelar, confirmar, alertar, los estilos de cada botón deben ser diferentes entre sí.

Aplicación.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> ); }

Botón.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> }