Reactjs 如何在材质UI中使用框组件使用覆盖按钮？

我一直在努力理解和编写MaterialUI中Box组件的代码。（）

我一直试图用文档中描述的两种方式覆盖按钮组件，但我不知道如何覆盖。当我使用这两种方法运行代码段时，按钮会出现，但没有颜色变化。然后，当我尝试在克隆元素代码段下面添加一个额外的按钮时，我会收到一个错误，它说“无法读取未定义的属性”className“

            <Box color="primary" clone>
                <Button>Click</Button>
                <Button>Click</Button>
            </Box>

点击
点击

当我以第二种渲染道具的方式在下面添加按钮组件时，第一个按钮完全从DOM中消失

             <Box color="secondary">
                {props => <Button {...props} > Click </Button>}
                <Button color="secondary">Click</Button>
            </Box> 

{props=>单击}
点击

---

如果您能解释一下重写底层DOM元素是如何工作的，我们将不胜感激。

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

primary

和

secondary

在调色板中不是有效的颜色。它们是

按钮
的
颜色
道具的有效选项，但这里您尝试在主题的
调色板
对象中引用颜色。为此，您需要
primary.main
和
secondary.main
（当您指定
时就是这样）

当使用

克隆

属性时，该框仅支持单个子项，当使用渲染道具方法时，它仅支持单个子项。在你的两个例子中，你都有两个孩子

---

以下是处理克隆选项的示例：

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

这将创建一个新的子元素，该元素将由

框

生成的

类名

与子元素上的任何现有类名相结合。它通过

children.props.className

获取这个现有类名，但是当有多个子时，

children

将是一个元素数组，并且没有

props

属性，因此您会得到错误：

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

---

下面是处理渲染道具方法的示例：

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

当您有多个子对象时，

typeof children==“function”

将不为真，并且不会使用渲染道具方法。在这种情况下，两个孩子只是得到正常的react渲染，而试图渲染一个函数不会渲染任何东西

---

下面是一个工作示例，通过在

克隆

案例中使用单个

按钮

子项，在渲染道具案例中使用单个函数子项（然后渲染两个

按钮

元素的函数），修复了所有这些问题

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Box”导入框；
导出默认函数App（）{
返回(
点击
{props=>(
点击
点击
)}
);
}

---

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

primary

和

secondary

在调色板中不是有效的颜色。它们是

按钮
的
颜色
道具的有效选项，但这里您尝试在主题的
调色板
对象中引用颜色。为此，您需要
primary.main
和
secondary.main
（当您指定
时就是这样）

当使用

克隆

属性时，该框仅支持单个子项，当使用渲染道具方法时，它仅支持单个子项。在你的两个例子中，你都有两个孩子

---

以下是处理克隆选项的示例：

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

这将创建一个新的子元素，该元素将由

框

生成的

类名

与子元素上的任何现有类名相结合。它通过

children.props.className

获取这个现有类名，但是当有多个子时，

children

将是一个元素数组，并且没有

props

属性，因此您会得到错误：

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

---

下面是处理渲染道具方法的示例：

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

当您有多个子对象时，

typeof children==“function”

将不为真，并且不会使用渲染道具方法。在这种情况下，两个孩子只是得到正常的react渲染，而试图渲染一个函数不会渲染任何东西

---

下面是一个工作示例，通过在

克隆

案例中使用单个

按钮

子项，在渲染道具案例中使用单个函数子项（然后渲染两个

按钮

元素的函数），修复了所有这些问题

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Box”导入框；
导出默认函数App（）{
返回(
点击
{props=>(
点击
点击
)}
);
}

---

这是否回答了您的问题？不幸的是没有。我确实希望覆盖样式，但仅使用Box组件文档中提到的任何一种方法。使用克隆元素或渲染道具。这是否回答了您的问题？不幸的是没有。我确实希望覆盖样式，但仅使用Box组件文档中提到的任何一种方法。使用克隆元素或渲染道具。惊人的解释！非常感谢。所以我只是在我的React项目中更改了我的代码以匹配您的代码，并且按钮的颜色仍然没有更改。我拍了一张截图。进口的顺序很重要。按钮前有盒子，按钮后有。导入顺序会影响

中生成样式的顺序，从而影响哪种样式获胜