材质 UI - 轮廓选择标签未正确渲染

Question

根据演示，材质 UI 概述选择输入的标签应位于选择框的顶部边框的顶部。

然而，在我的应用程序中，z-index标签的 似乎将其放置在顶部边框后面，因此看起来像一条线穿过标签。

我几乎完全从文档中获取了代码，据我所知，没有任何样式与此输入元素冲突。我已将调试器中的样式与我拥有的样式和文档中的样式进行了比较，并且我没有看到任何第一方 CSS 文件导致在元素上设置不同的样式。

知道这里可能出了什么问题吗？

这是源代码：

<FormControl variant='outlined' style={{ width: '100%' }} margin={'1'}>
  <InputLabel id='test-select-label'>Label</InputLabel>
  <Select
    labelId='test-select-label'
    id='test-select'
    value={'test1'}
    onChange={e => setTest(e.target.value)}
    size='small'
  >
    <MenuItem key={1} value={'test'} >Test 1</MenuItem>
    <MenuItem key={2} value={'test2'} >Test 2</MenuItem>
  </Select>
</FormControl>

Answer 1

解决方案一：使用TextField

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

<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，请参阅此答案。

解决方案2：使用Select

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

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

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

Select当放置在FormControl标签内部或旁边时，该标签文本将作为标签呈现在屏幕上。Select。

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

该标签文本是隐藏的，用于在标签收缩border-top时覆盖和删除真实标签所占据的部分。Select

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

将它们放在一起，我们将得到如下所示的内容，请注意，使用这种方法，我们需要在两个不同的位置设置标签，这不是很干燥，所以我更喜欢第一种方法。

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

现场演示

Answer 2

如果您将 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>

这是一个现场演示，您可以在其中看到差异：