溶液1：使用TextField

这就是TextField的用途。它在内部使用FormControl和InputLabel，并确保它们能够很好地协同工作。您可以通过重写select属性来告诉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解答。

溶液2：使用Select

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

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

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

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

将标签文本传递到Select组件的label属性

当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属性添加到select组件中，问题应该会消失。

<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;
}

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