方案一：使用TextField

这就是TextField的作用。它在内部使用FormControl和InputLabel，并确保它们能够很好地协同工作。您可以通过覆盖select props来告诉TextField渲染select而不是input：

<TextField
  value={value}
  onChange={(e) => setValue(e.target.value)}
  select // tell TextField to render select
  label="Label"
>
  <MenuItem key={1} value="test">
    Test 1
  </MenuItem>
  <MenuItem key={2} value="test2">
    Test 2
  </MenuItem>
</TextField>

有关TextField如何工作的更多详细信息，请参阅this答案。

方案二：使用Select

如果你决定使用Select，你需要写更多的代码来完成相同的工作量：

将标签文本作为InputLabel子级传递

<InputLabel id="test-select-label">Label</InputLabel>

将此标签文本放在FormControl内部并靠近Select组件时，将在屏幕上呈现为Select标签。

将标签文本传递给Select组件的label props

当Select标签为shrinked时，此标签文本被隐藏，用于覆盖和删除border-top中真实的标签被占用的部分。

<Select labelId="test-select-label" label="Label">

把它放在一起，我们将有如下所示的东西，注意，这种方法，我们需要设置标签在2个不同的地方，这是不是很干，所以我更喜欢第一种方法。

<FormControl>
  <InputLabel id="test-select-label">Label</InputLabel>
  <Select
    value={value}
    onChange={(e) => setValue(e.target.value)}
    labelId="test-select-label"
    label="Label"
  >
    <MenuItem key={1} value="test">
      Test 1
    </MenuItem>
    <MenuItem key={2} value="test2">
      Test 2
    </MenuItem>
  </Select>
</FormControl>

现场演示

如果您将label属性添加到您的选择组件，问题应该会消失。

<FormControl>
  <InputLabel id="test-select-label">Label</InputLabel>
  <Select
    value={value}
    onChange={(e) => setValue(e.target.value)}
    label="Label" // add this
  >
    <MenuItem key={1} value="test">
      Test 1
    </MenuItem>
    <MenuItem key={2} value="test2">
      Test 2
    </MenuItem>
  </Select>
</FormControl>

下面是一个现场演示，您可以看到差异：

试试这个方法，它对我很有效。
JSX：

<TextField select variant={"outlined"} style={{width: "100%"}} label="Label">
    <MenuItem key={1} value="test">
        Test 1
    </MenuItem>
    <MenuItem key={2} value="test2">
        Test 2
    </MenuItem>
</TextField>

CSS：

.MuiSelect-outlined.MuiSelect-outlined, .MuiSelect-outlined.MuiSelect-outlined:active, .MuiSelect-outlined.MuiSelect-outlined:focus  {
    background-color: transparent;
    text-align: left;
    font-family: sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

Refer to the highlighted text
请在Select中包含标签 prop ，并确保与您在InputLabel中指定的值匹配

当我试图在FormControl组件上设置填充时，也遇到了类似的问题。我有正确的ID和标签，但这仍然是一个问题。CSS不是我的强项，但我注意到，如果我可以在FormControl组件上使用margin复制我想要的布局，标签就可以适当地对齐。请参阅使用填充而不是边距的图像：

你可以试试这个：

<FormControl >
  <InputLabel
    color="primary"
    id="demo-multiple-checkbox-label"
  >
    Equip
  </InputLabel>

  <Select
    labelId="demo-multiple-checkbox-label"
    id="demo-multiple-checkbox"
    onChange={handleCloseGangsters}
    input={<OutlinedInput label="Equip" />}
  >
    <MenuItem key="key1" value={'value1'}>
      <ListItemText primary={`Equip name1`} />
    </MenuItem>
    <MenuItem key="key2" value={'value2'}>
      <ListItemText primary={`Equip name2`} />
    </MenuItem>
  </Select>
</FormControl>