Material-UI Grid baseline alignment for Button, ButtonGroup and Typography

问题

I've spent two days trying to achieve a simple goal: align all text on the baseline in this layout. Tried a dozen of alignItems combinations on Grid elements, nothing worked.

<!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,
  Typography
} = MaterialUI;

function App() {
  return (
    <Grid container style={{ borderWidth: '1px', borderStyle: 'solid' }} justify="space-between">
      <Grid item xs={2}>
        <Button variant="outlined">Could</Button>
      </Grid>
      <Grid item xs>
        <Grid container spacing={1}>
          <Grid item>
            <Typography variant="h4">You</Typography>
          </Grid>
          <Grid item>
            <ButtonGroup>
              <Button variant="outlined">align</Button>
              <Button variant="outlined">this?</Button>
            </ButtonGroup>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}

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

回答1:

Found one way to fix it myself!

Changes made:

Added alignItems="baseline" to both container grids.
Wrapped the first Button in a ButtonGroup to make it align with the other ButtonGroup (see Material-UI Button and ButtonGroup do not align on the baseline to understand why it's necessary).

Not sure if this is the best way to do it, so I'll leave the question open for now.

<!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, Typography } = MaterialUI;

      function App() {
        return (
          <Grid
            container
            style={{ borderWidth: "1px", borderStyle: "solid" }}
            justify="space-between"
            alignItems="baseline"
          >
            <Grid item xs={2}>
              <ButtonGroup>
                <Button variant="outlined">Could</Button>
              </ButtonGroup>
            </Grid>
            <Grid item xs>
              <Grid container spacing={1} alignItems="baseline">
                <Grid item>
                  <Typography variant="h4">You</Typography>
                </Grid>
                <Grid item>
                  <ButtonGroup>
                    <Button variant="outlined">align</Button>
                    <Button variant="outlined">this?</Button>
                  </ButtonGroup>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        );
      }

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

来源：https://stackoverflow.com/questions/61954501/material-ui-grid-baseline-alignment-for-button-buttongroup-and-typography

标签

reactjs

material-ui