MUI - 轮廓选择标签未正确呈现

IT技术 css reactjs drop-down-menu material-ui
2021-04-09 14:54:02

根据演示，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>
3个回答

解决方案1：使用 TextField

这TextField就是为了。它在内部使用 FormControl和InputLabel确保它们可以很好地协同工作。你可以告诉TextField渲染select，而不是input通过重写selectprops：

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

将标签文本传递给组件的labelpropsSelect

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

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

把它放在一起，我们将有如下内容，请注意，使用这种方法，我们需要在 2 个不同的地方设置标签，这不是很 DRY，所以我更喜欢第一种方法。

<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 不是很 DRY，但是如果你制作一个自定义组件来委托你提出的代码，那么丑陋就会被封装
2021-05-25 14:54:02

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

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

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

正确编辑 material-ui-outlined-select-label-is-not-rendering-properly

如果 CodeSandbox 宕机，人们只会复制这部分代码，而不会知道他们需要更改 2 个地方的标签。另一个地方是InputLabel您的答案中省略的地方。
2021-05-28 14:54:02
如果您将标签更改为更长的字符串，您的标签仍会被顶部边框切割。
2021-06-12 14:54:02
如果您的标签属性和输入标签的长度相同，则情况并非如此。+1 不过，您的第一种方法似乎要好得多。
2021-06-15 14:54:02

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;
}
其它你可能感兴趣的问题
上一篇符号“&$checked”是什么意思 下一篇useEffect 不监听 localStorage