您在问题中显示的代码存在一些问题。

1. primary并且secondary不是调色板中的有效颜色。它们是colorprop of的有效选项Button，但在这里您尝试引用主题palette对象中的颜色。为此，您需要primary.mainand secondary.main（这是Button在您指定 时使用的<Button color="primary">）。

2. Box 在使用clone属性时仅支持单个子节点，在使用 render props 方法时仅支持单个子节点。在您的两个示例中，您都有两个孩子。

这是处理克隆选项的Material-UI 源代码：

      if (clone) {
        return React.cloneElement(children, {
          className: clsx(children.props.className, className),
          ...spread,
        });
      }

这是创建一个新的子元素，它将className生成的 byBox与子元素上的任何现有类名相结合。它通过 获取这个现有的类名children.props.className，但是当有多个子元素时children，它将是一个元素数组并且没有props属性，因此您会收到错误：

无法读取未定义的属性“类名”

这是处理渲染props方法的Material-UI 源代码：

      if (typeof children === 'function') {
        return children({ className, ...spread });
      }

当您有多个孩子时，则typeof children === 'function'不会是 true，并且不会使用 render props 方法。在这种情况下，两个孩子都会得到正常的react渲染，而试图渲染一个函数不会渲染任何东西。

Button下面是一个工作示例，它通过在案例中使用单个子项clone和在渲染props案例中使用单个函数子项（然后呈现两个Button元素的函数）来解决所有这些问题。

import React from "react";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <>
      <Box color="primary.main" clone>
        <Button>Click</Button>
      </Box>
      <Box color="secondary.main">
        {props => (
          <>
            <Button {...props}> Click </Button>
            <Button color="secondary">Click</Button>
          </>
        )}
      </Box>
    </>
  );
}