Question

在下面的示例中，有人可以解释为什么Button和ButtonGroup不在基线上对齐吗？我可以在ButtonGroup元素上更改属性以使其对齐吗？

<!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>

Answer 1

如果要对齐它们baseline，则可以用display代替block覆盖inline-flex CSS。您可以通过使用component上的<ButtonGroup>道具来做到这一点。

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

Material-UI Button和ButtonGroup不在基线上对齐

1 个答案: