Css 材质UI-轮廓选择标签未正确呈现

根据演示，MUI轮廓选择输入的标签应位于选择框顶部边框的顶部

然而，在我的应用程序中，标签的

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>

标签
setTest（e.target.value）}
大小='small'
>
测试1
测试2

如果将label属性添加到select组件，则问题应消失

。。。
setValue（e.target.value）}
label=“label”//添加此项
>
测试1
测试2
...

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

解决方案1：使用

TextField

这就是

TextField

的用途。在内部安装

FormControl

和

InputLabel

，并确保它们协同工作。通过覆盖

select

道具，您可以让

TextField

呈现

select

而不是

input

：

setValue（e.target.value）}
选择//告诉TextField渲染选择
label=“label”
>
测试1
测试2

解决方案2：使用

选择

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

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

当将此标签文本放入
FormControl
中并置于
Select
组件旁边时，将在屏幕上呈现为
Select
标签

将标签文本传递给
选择组件的
标签
道具
此标签文本是隐藏的，用于覆盖和删除
边框顶部
的一部分，当
选择
标签时，实际标签位于该部分



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


标签
setValue（e.target.value）}
labelId=“测试选择标签”
label=“label”
>
测试1
测试2

现场演示
如果将标签更改为更长的字符串，则标签仍由上边框剪切。如果标签属性和输入标签具有相同的长度，则情况并非如此+1不过，您的第一种方法似乎要好得多。如果CodeSandbox关闭，人们只会复制您代码的这一部分，而不知道他们需要在两个位置更改标签。另一个位置在
InputLabel
中，答案中省略了该位置。