如何将道具动态发送到material UI中的样式钩子？

import React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const useStyles = makeStyles((theme) => ({
  root: (props) => ({
    backgroundColor: props.color || theme.palette.primary.main,
    color: theme.palette.common.white,
    padding: theme.spacing(1, 2),
    '&:hover': {
      backgroundColor: props.hoverColor || theme.palette.primary.dark,
    },
  }),
}));

const DynamicButton = ({ color, hoverColor, children }) => {
  const classes = useStyles({ color, hoverColor });

  return (
    <Button className={classes.root}>
      {children}
    </Button>
  );
};

export default DynamicButton;

import React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const DynamicButton = styled(Button)(({ theme, color, hoverColor }) => ({
  backgroundColor: color || theme.palette.primary.main,
  color: theme.palette.common.white,
  padding: theme.spacing(1, 2),
  '&:hover': {
    backgroundColor: hoverColor || theme.palette.primary.dark,
  },
}));

const App = () => {
  return (
    <DynamicButton color="green" hoverColor="darkgreen">
      Dynamic Styled Button
    </DynamicButton>
  );
};

export default App;