如何在 React JS Material-UI 中使用 makeStyles 制作不同的样式？

Question

我是 React JS 的初学者 Material UI。

我正在尝试制作不同样式的按钮。例如，如果按钮属性名称= submit,ok,cancel,confirm,alert，那么每个按钮的样式应该彼此不同

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

你应该这样做：

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