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

本文介绍了Material-UI Button和ButtonGroup在基线上不对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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>

推荐答案

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

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

这篇关于Material-UI Button和ButtonGroup在基线上不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！