“主光”不是MUI按钮支持的颜色之一。您可以在此处的文档中看到here
你有几个选择：

• 手动覆盖此按钮的样式。（不理想）。
• 创建一个类，指定您想要的颜色，并提供十六进制颜色代码作为背景颜色。（也不理想）。
• 使用makeStyles创建一个JSX类，它将应用程序的主题作为参数，并直接从主题中提供primary.light颜色。（我不确定这在Material UI的版本5中是否过时，但这是你通常在v4中所做的）。

在你的情况下，最简单的方法可能是快速浏览一下这里的文档，它展示了如何使用你的主题和从mui/material/styles导入的styled函数来自定义按钮的颜色。

我不得不在主题对象中创建“primaryLight”颜色属性，这样我就可以使用。还不得不添加类型，以便Button可以接受“primaryLight”。
我用了这个document

一个简单的解决方法是使用定义的主题颜色，然后用sx prop覆盖。

<Button
    color={'primary'}
    variant='contained'
    onClick={() => toggle(true)}
    sx={{width: '100%', bgcolor: 'primary.dark', '&:hover': {bgcolor: 'primary.light'}}}
  >
    comments
  </Button>

我认为这是设计所阻止的。
Button组件的目的是获取颜色，并使用颜色主键。
您可以使用ButtonPropsColorOverrides来允许更多的颜色值，这在您向主题添加更多颜色时非常有用，但仍然-您将获得颜色的主键，并且无法访问其他颜色键。
我相信这种设计是为了保持色彩系统的完整性。你不应该使用primary.light键，因为它可能被用于其他效果（如悬停）。
请注意，您可以为其他一些组件使用内部颜色键，例如排版：

<Typography variant="body2" color="primary.light">Hello</Typography>

<Button
        style={{ backgroundColor: "#f8ad33" }}
        variant="contained"
        // color="primary"
        onClick={handleSubmit(onSubmit)}
      >
        Register
      </Button>