如果我使用 material-ui ButtonGroup 创建自定义按钮不起作用

Question

从标题中您可以理解，我使用 @material-ui/core 中的 Button 为自己创建了一个自定义按钮。但是当我将这些自定义按钮添加到 ButtonGroup 时，它们不会充当组。

我的自定义按钮：

import React from "react";
import { Button } from "@material-ui/core";
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import PencilIcon from '@material-ui/icons/LinkSharp'
import { makeStyles } from "@material-ui/core/styles";

const icons = { "cloud": <CloudUploadIcon />, "pencil": <PencilIcon /> }
const useStyles = makeStyles(theme => ({
    root: {
        padding: 30,
        fontSize: 18,
        '&:hover': {
            boxShadow: '0 0 0.1rem 0.1rem rgba(25,25,25,1)'
        }
    }
}));

function __Button(props) {
    const classes = useStyles();
    {
        return (
            <Button variant="outlined" startIcon={icons[props.icon]} className={classes.root}>
                {props.text}
            </Button>
        )
    }
}

export default __Button;

我的使用情况：

<ButtonGroup size="large" aria-label="small outlined button group">
    <__Button text={"I will paste links!"} icon={"pencil"} />
    <__Button text={"I will upload a text file!"} icon={"cloud"} />
</ButtonGroup>

问题图片：

Answer 1

您需要将来自ButtonGroup 的所有其他道具传递给Button。

function __Button({ icon, text, ...otherProps }) {
  const classes = useStyles();
  return (
    <Button
      variant="outlined"
      startIcon={icons[icon]}
      className={classes.root}
      {...otherProps} // passing props from ButtonGroup to Button
    >
      {text}
    </Button>
  );
}

这是working example。