带有 IntputLabel 和 Input 的 Material UI 网格位于水平行：如何要求 vertical-align 位于标签的中间？

Question

我有非常标准的 React Material UI 网格，其中 InputLabel 和 Input 位于水平行。代码是：

const Container = (props) => <Grid container {...props} />;
const Item = (props) => <Grid item xs={1} {...props} />;
const ContainerItem = (props) => <Grid container item {...props} />;

function App() {
  return (
    <div>
      <MuiThemeProvider theme={ucs_theme}>
        <Container>
          <ContainerItem>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie">Serie</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie2">Serie 2</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie2" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie3">Serie 3</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie3" />
            </Item>
          </ContainerItem>
          <ContainerItem>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie">Serie</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie2">Serie 2</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie2" />
            </Item>
            <Item>
              <InputLabel htmlFor="m_gen_ref_serie3">Serie 3</InputLabel>
            </Item>
            <Item>
              <Input type="text" id="m_gen_ref_serie3" />
            </Item>
          </ContainerItem>
        </Container>
      </MuiThemeProvider>
    </div>
  );
}

完整示例可用： https://codesandbox.io/s/react-final-form-material-ui-example-forked-f0ir9?file=/src/index.js

请注意，我的 codesandbox 示例使用了一些主题，但该主题（至少通过这种主题）不会影响（未解决）该问题。

我有问题，我的问题是关于 InputLabel（呈现为 HTML 标签）文本的位置 - 它位于左上角。左边的位置没问题。问题是我不喜欢将文本放在顶部（一些控制台条目有一些奇怪的底部边距）。我想为此文本设置 vertical-align="middle"。但是InputLabel没有这样的属性。如何在 Material UI 网格中为我的标签（标签文本）实现 vertical-align="middle" 效果？

也许我必须使用一些奇怪的中间组件，比如 Paper？

Answer 1

您可以使用道具alignItems

编辑您的项目排列

只需查看文档 here 了解更多信息，您还可以在 Grid item 上使用 CSS 规则来编辑展示位置

带有 IntputLabel 和 Input 的 Material UI 网格位于水平行：如何要求 vertical-align 位于标签的中间？

Material UI grid with IntputLabel and Input placed in horizontal row: how to ask vertical-align to be middle for the label?

reactjs

material-ui

vertical-alignment