Question

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

我想渲染一个内部包含Button元素的ButtonGroup，但是这些按钮来自其他自定义组件，这些组件返回具有与该按钮链接的Modal视图的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

主要有两个问题：

您要在每个按钮周围添加一个div。这会稍微影响样式。将其更改为fragment（例如<>或<React.Fragment>）。
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);

ButtonGroup中的按钮组件

1 个答案: