There are a few issues with the code you've shown in your question.
primary
and secondary
are not valid colors within the palette. They are valid options for the color
prop of Button
, but here you are trying to reference colors within the theme's palette
object. For this purpose, you need primary.main
and secondary.main
(which is what Button uses when you specify <Button color="primary">
).
Box only supports a single child when using the clone
property and it only supports a single child when using the render props approach. In both of your examples you have two children.
Here is the Material-UI source code that deals with the clone option:
if (clone) {
return React.cloneElement(children, {
className: clsx(children.props.className, className),
...spread,
});
}
This is creating a new child element that combines the className
generated by Box
with any existing class name on the child. It gets at this existing class name via children.props.className
, but when there are multiple children then children
will be an array of elements and will not have a props
property so you get the error:
Cannot read property 'className' of undefined
Here is the Material-UI source code that deals with the render props approach:
if (typeof children === 'function') {
return children({ className, ...spread });
}
When you have more than one child, then typeof children === 'function'
will not be true and it won't use the render props approach. In this case, both children just get normal react rendering and trying to render a function doesn't render anything.
Below is a working example that fixes all of these problems by using a single Button
child in the clone
case and a single function child in the render props case (a function that then renders two Button
elements).
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>
</>
);
}