Material-UI Button and ButtonGroup do not align on the baseline

问题

Can someone explain why Button and ButtonGroup do not align on the baseline in the example below? Is there a property I can change on the ButtonGroup element to make them align?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
    <!-- Fonts to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <!-- Icons to support Material Design -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
const {
  Grid,
  Button,
  ButtonGroup
} = MaterialUI;

function App() {
  return (
    <Grid container alignItems="baseline">
      <Grid item>
        <Button variant="outlined">Cancel</Button>
      </Grid>
      <Grid item>
        <ButtonGroup>
          <Button variant="outlined">Submit</Button>
        </ButtonGroup>
      </Grid>
    </Grid>
  );
}

ReactDOM.render(
  <App />,
  document.querySelector('#root'),
);
    </script>
  </body>
</html>

回答1:

If you want to align them baseline, you can override the display css with block instead of inline-flex. You can do this by using the component props on <ButtonGroup>.

<ButtonGroup component={Box} display="block !important">

来源：https://stackoverflow.com/questions/61952911/material-ui-button-and-buttongroup-do-not-align-on-the-baseline

标签

css

reactjs

material-ui