如何在ReactJS中将带有属性的CSS转换为MaterialUI样式

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
        background-color: darkblue;
    }
}

npm install @material-ui/core

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
    button: {
        backgroundColor: 'blue',
        color: 'white',
        padding: theme.spacing(1, 2), // 这里使用 theme.spacing 来保持一致的间距
        border: 'none',
        borderRadius: 5,
        cursor: 'pointer',
        '&:hover': {
            backgroundColor: 'darkblue',
        },
    },
}));

function MyButton() {
    const classes = useStyles();

    return (
        <Button className={classes.button}>
            Click me
        </Button>
    );
}

export default MyButton;