材质 UI 下拉/自动完成

Question

当出于某种原因尝试在材质 UI 中放置带有下拉列表的标签时，我看到了这种行为

由于某种原因，我无法让它们在同一行对齐。

这是我的组件：

const useStyles = makeStyles(theme => ({
    root: {
        justifyContent: 'center',
        display: 'flex',
    },
    formControl: {
        margin: theme.spacing(1),
        minWidth: 120,
      },
    selectEmpty: {
    marginTop: theme.spacing(2),
    },
}));

function DutPreferencesTab(props) {
    const classes = useStyles()
    const {data} = props
    console.log(data)
    const [age, setAge] = React.useState('');

    const handleChange = (event) => {
      setAge(event.target.value);
    };
    return (
        <div style={{display: 'flex', direction: 'row'}}>
             <CustomLabel  text={'Relay:'}  variant={"subtitle1"} />
                     <FormControl className={classes.formControl}>
                         <InputLabel id="demo-simple-select-label">Age</InputLabel>
                         <Select
                         labelId="demo-simple-select-label"
                         id="demo-simple-select"
                         value={age}
                         onChange={handleChange}
                         >
                         <MenuItem value={10}>Ten</MenuItem>
                         <MenuItem value={20}>Twenty</MenuItem>
                         <MenuItem value={30}>Thirty</MenuItem>
                         </Select>
                     </FormControl>
        </div>
    )
}

CustomLabel.js

import React from 'react'
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';

function CustomLabel({text, variant, styles}) {
    return (
        <div className={clsx(styles)}>
            <Typography variant={variant} gutterBottom>
                {text}
            </Typography>
        </div>
    )
}

export default CustomLabel

我尝试了所有方法，但仍然无法让它们在同一行对齐，我无法弄清楚我们的原因。据我所知，它似乎只发生在下拉菜单中。我还有其他与标​​签完全对齐的文本。

我错过了什么吗？

Answer 1

如果您在开发工具中突出显示这些元素，您会看到它们是对齐的。问题只是Select 比标签高得多，并且默认情况下元素的顶部是对齐的（实际上元素被拉伸到相同的高度，但这具有将它们排列在顶部的效果） .

当您选择一个项目并且Select 中的标签（例如“年龄”）向上移动时，您可以更轻松地看到它为什么这么高。

解决方法是修改包装标签和选择的div上的align-items CSS属性。在这种情况下，baseline 的值似乎是最佳选择。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import CustomLabel from "./CustomLabel";

const useStyles = makeStyles((theme) => ({
  root: {
    alignItems: "baseline",
    display: "flex"
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  }
}));

export default function DutPreferencesTab(props) {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };
  return (
    <div className={classes.root}>
      <CustomLabel text={"Relay:"} variant={"subtitle1"} />
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

相关 Flexbox 资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/#align-items