MUI - Outlined select 标签未正确呈现

Question

根据演示，select 输入的 MUI 标签应该位于 select 框的顶部边框的顶部。

但是，在我的应用程序中，标签的 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

如果您将标签属性添加到 select 组件，您的问题应该会消失。

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

这是一个现场演示，您可以在其中看到不同之处：

Answer 2

解决方案 1：使用 `TextField`

这就是 TextField 的用途。它在内部 uses 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 工作原理的更多详细信息，请参阅答案。

解决方案 2：使用 `Select`

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

将标签文本作为 `InputLabel` children

传递

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

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

将标签文本传递给 `Select` 组件的 `label` 道具

此标签文本被隐藏，用于在Select标签为.[=37=时覆盖并删除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>

现场演示

Answer 3

试试这个方法，对我有用。

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

MUI - Outlined select 标签未正确呈现

MUI - Outlined select label is not rendering properly

css

drop-down-menu

reactjs

material-ui

解决方案 1：使用 `TextField`

解决方案 2：使用 `Select`

将标签文本作为 `InputLabel` children

将标签文本传递给 `Select` 组件的 `label` 道具

现场演示

MUI - Outlined select 标签未正确呈现

MUI - Outlined select label is not rendering properly

css

drop-down-menu

reactjs

material-ui

解决方案 1：使用 TextField

解决方案 2：使用 Select

将标签文本作为 InputLabel children

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

现场演示

解决方案 1：使用 `TextField`

解决方案 2：使用 `Select`

将标签文本作为 `InputLabel` children

将标签文本传递给 `Select` 组件的 `label` 道具