ButtonGroup中的按钮组件

Question

我使用的是React 16.9.0和Matter-UI4.4.2，我有以下问题。

我希望呈现一个带有按钮元素的ButtonGroup，但是这些按钮来自于其他自定义组件，这些组件返回一个带有链接到按钮的Modal视图的button呈现。问题是，我不能让它们看起来像一个样式相同的ButtonGroup，因为看起来按钮元素只采用“分组”样式，而不是“可视”样式。

再现行为的示例代码：

<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。这会对造型有一点影响。改为片段 (例如，<>或<React.Fragment>)。
2. ButtonGroup的工作方式是通过元素和添加道具来控制样式。在中间引入自定义组件时，需要将自定义组件未使用的任何支持传递给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);

​

​