MUI - 概述的选择标签未正确呈现

Posted 2023-03-06

【中文标题】MUI - 概述的选择标签未正确呈现

【英文标题】：MUI - Outlined select label is not rendering properly

【发布时间】：2021-07-07 21:44:46

【问题描述】：

根据演示，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>

【参考方案1】：

解决方案 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 工作原理的更多详细信息，请参阅this 答案。

解决方案 2：使用Select

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

将标签文本作为InputLabelchildren 传递

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

现场演示

【讨论】：

当然解决方案 2 不是很干燥，但是如果您制作一个自定义组件来委托您提出的代码，那么丑陋的东西就会被封装

【参考方案2】：

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

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

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

【讨论】：

如果您将标签更改为更长的字符串，您的标签仍会被顶部边框切割。

如果您的标签属性和输入标签具有相同的长度，则不是这样。 +1 不过，您的第一种方法似乎要好得多。

如果 CodeSandbox 已关闭，人们只会复制您的这部分代码，而不知道他们需要在 2 个地方更改标签。另一个地方在InputLabel 中，您的答案中省略了。

【参考方案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;