ButtonGroup 内的按钮组件

Question

我正在使用 React 16.9.0 和 Material-UI 4.4.2，但遇到以下问题。

我想渲染一个包含 Button 元素的 ButtonGroup，但这些按钮来自其他自定义组件，这些组件返回一个带有链接到按钮的模态视图的 Button 渲染。问题是，我不能让它们看起来像具有相同样式的 ButtonGroup，因为 Button 元素似乎只采用“分组”样式而不是“视觉”样式。

重现行为的示例代码：

<ButtonGroup variant="outlined">
    <AModal/>
    <BModal/>
    <CModal/>
</ButtonGroup>

如您所见，渲染输出看起来不像预期的那样。请记住，我正在使用 outlined 变体定义按钮，因为如果不是，它们只会呈现为文本按钮。

非常感谢任何帮助

按要求添加AModal：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import InnerModalComponent from './InnerModalComponent';

const useStyles = makeStyles((theme) => ({
    modal: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    paper: {
        backgroundColor: theme.palette.background.paper,
        border: '2px solid #000',
        boxShadow: theme.shadows[5],
        padding: theme.spacing(2, 4, 3),
    },
}));

export default function AModal() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);

    function handleOpen() {
        setOpen(true);
    }

    function handleClose() {
        setOpen(false);
    }

    return (
        <div>
            <Button variant="contained" onClick={handleOpen}> A </Button>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                className={classes.modal}
                open={open}
                onClose={handleClose}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{ timeout: 500 }}
            >
                <Fade in={open}>
                    <div className={classes.paper}>
                        <div
                            style={{
                                display: 'flex',
                                flexDirection: 'row',
                                alignItems: 'stretch',
                                justifyContent: 'center',
                            }}
                        >
                            <InnerModalComponent/>
                        </div>
                        <Button variant="contained" color="secondary" style={{ marginTop: '10px' }}> Button inside Modal</Button>
                    </div>
                </Fade>
            </Modal>
        </div>
    );
}

Answer 1

主要有两个问题：

1. 您将在每个按钮周围添加div。这会稍微影响造型。将其改为fragment（例如<> 或<React.Fragment>）。

2. ButtonGroup 的工作方式是通过cloning the child Button elements 并添加道具来控制样式。当您在两者之间引入自定义组件时，您需要将自定义组件未使用的任何道具传递给Button。

这是一个工作示例：

import React from "react";
import ReactDOM from "react-dom";

import ButtonGroup from "@material-ui/core/ButtonGroup";
import Button from "@material-ui/core/Button";
import Modal from "@material-ui/core/Modal";

const AModal = props => {
  return (
    <>
      <Button {...props}>A</Button>
      <Modal open={false}>
        <div>Hello Modal</div>
      </Modal>
    </>
  );
};
const OtherModal = ({ buttonText, ...other }) => {
  return (
    <>
      <Button {...other}>{buttonText}</Button>
      <Modal open={false}>
        <div>Hello Modal</div>
      </Modal>
    </>
  );
};
// I don't recommend this approach due to maintainability issues,
// but if you have a lint rule that disallows prop spreading, this is a workaround.
const AvoidPropSpread = ({
  className,
  disabled,
  color,
  disableFocusRipple,
  disableRipple,
  fullWidth,
  size,
  variant
}) => {
  return (
    <>
      <Button
        className={className}
        disabled={disabled}
        color={color}
        disableFocusRipple={disableFocusRipple}
        disableRipple={disableRipple}
        fullWidth={fullWidth}
        size={size}
        variant={variant}
      >
        C
      </Button>
      <Modal open={false}>
        <div>Hello Modal</div>
      </Modal>
    </>
  );
};
function App() {
  return (
    <ButtonGroup>
      <AModal />
      <OtherModal buttonText="B" />
      <AvoidPropSpread />
    </ButtonGroup>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);