如何自定义基于属性的Material-UI和styled-components样式

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

const useStyles = makeStyles((theme) => ({
  button: {
    color: (props) => props.color,
    backgroundColor: (props) => props.backgroundColor,
    // 其他样式属性...
  },
}));

const MyButton = (props) => {
  const classes = useStyles(props);

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

<MyButton color="red" backgroundColor="blue">Custom Button</MyButton>

import styled from 'styled-components';

const StyledButton = styled.button`
  color: ${(props) => props.color};
  background-color: ${(props) => props.backgroundColor};
  // 其他样式属性...
`;

const MyButton = (props) => {
  return (
    <StyledButton color={props.color} backgroundColor={props.backgroundColor}>
      {props.children}
    </StyledButton>
  );
};

<MyButton color="red" backgroundColor="blue">Custom Button</MyButton>