自定义道具在材料-UI组件中无法使用

Question

我想在MUI按钮中添加（背景＆amp; color）自定义道具，例如：

<ButtonCustom bg="#6415ff" color="#f7fafc">Sign Up</ButtonCustom>
<ButtonCustom bg="#e2e8f0" color="#4a5568">Search</ButtonCustom>

文件：buttoncustom.js，

import Button from "@mui/material/Button";
import { styled } from "@mui/system";
const ButtonStyled = styled(Button)`
  background-color: ${({ bg }) => bg};
  color: ${({ color }) => color};
  padding: 16px 0;
  &:hover {
    background-color: #5011cc;
  }
  font-size: 16px;
  width: 12rem;
`;

export default ButtonStyled;

但它会给我这个错误：

TypeError
Cannot read properties of undefined (reading 'main')

所以我的问题是：我如何添加多个自定义道具？

非常感谢您给我时间并回答这个问题。