title: Button components inside ButtonGroup
body: <p>I'm using React 16.9.0 and Material-UI 4.4.2 and I'm having the following issue.</p>
  
  <p>I want to render a ButtonGroup with Button elements inside it but these buttons come from other custom components which return a Button render with a Modal view linked to the button. Thing is, I can't make them look like a ButtonGroup with the same style since it seems like the Button elements only take the "grouping" styling but not the "visual" styling.</p>
  
  <p>Example code to reproduce behaviour:</p>
  
  <pre><code>&lt;ButtonGroup variant="outlined"&gt;
      &lt;AModal/&gt;
      &lt;BModal/&gt;
      &lt;CModal/&gt;
  &lt;/ButtonGroup&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/u9dYU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u9dYU.png" alt="Output"></a></p>
  
  <p>As you can see, the render output does not look as expected. Bare in mind that I'm defining the buttons with the <code>outlined</code> variant since if not they just render as Text Buttons.</p>
  
  <p>Any help is much appreciated</p>
  
  <p>Adding <code>AModal</code> as requested:</p>
  
  <pre><code>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) =&gt; ({
      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 (
          &lt;div&gt;
              &lt;Button variant="contained" onClick={handleOpen}&gt; A &lt;/Button&gt;
              &lt;Modal
                  aria-labelledby="transition-modal-title"
                  aria-describedby="transition-modal-description"
                  className={classes.modal}
                  open={open}
                  onClose={handleClose}
                  closeAfterTransition
                  BackdropComponent={Backdrop}
                  BackdropProps={{ timeout: 500 }}
              &gt;
                  &lt;Fade in={open}&gt;
                      &lt;div className={classes.paper}&gt;
                          &lt;div
                              style={{
                                  display: 'flex',
                                  flexDirection: 'row',
                                  alignItems: 'stretch',
                                  justifyContent: 'center',
                              }}
                          &gt;
                              &lt;InnerModalComponent/&gt;
                          &lt;/div&gt;
                          &lt;Button variant="contained" color="secondary" style={{ marginTop: '10px' }}&gt; Button inside Modal&lt;/Button&gt;
                      &lt;/div&gt;
                  &lt;/Fade&gt;
              &lt;/Modal&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>