MUI 选择边框未延伸至标签、空白答案

【问题标题】：MUI Select Border not extending to label, white spaceMUI 选择边框未延伸至标签、空白
【发布时间】：2023-02-15 05:50:04
【问题描述】：

我正在尝试使用 @mui/material/Select 呈现下拉菜单，并希望顶部边框延伸到标签旁边。现在标签和下拉 div 的右边缘之间有空白。我检查了开发工具，我唯一可以识别的边框属性是 border-radius。有没有办法让边框向上延伸到标签的边缘？

Rendered Dropdown

YearDropdown.js

import React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import styled from 'styled-components';

import { BEM_Date } from 'containerMfe/Functions';

const Form = styled(FormControl)`
  width: 80px;
  margin-bottom: 15px!important;

  & > div > div {
    padding: 10px;
  }
`

export default function YearDropdown({ columns, yr, handler }) {
  const years = [...new Set(columns.map(date => BEM_Date(date).getFullYear()))]
  
  return (
    <React.Fragment>
      <Form>
        <InputLabel id='year-dropdown-label'>Year</InputLabel>
        <Select
          fullWidth
          labelId='year-dropdown-label'
          id='year-dropdown'
          value={yr}
          onChange={handler}
        >
          {years.map(year => <MenuItem key={'year-' + year} value={year}>{year}</MenuItem>)}
        </Select>

      </Form>
    </React.Fragment>
  )
}

【问题讨论】：

标签： select material-ui border

【解决方案1】：

我遇到了同样的问题，但无法解决。就我而言，不设置值或默认值似乎可以解决标签问题，但必须控制我的输入。

起作用的是使用 TextField 组件，select 属性设置为 true，InputLabelProps={{ shrink: true }}。

这是我原来的选择，我可以选择它的标签不是修复，然后是一个有效的等效 TextField 示例：

// original select implementation with broken label
<FormControl fullWidth>
  <InputLabel id="sort-by-label">Sort By</InputLabel>
  <Select
    label="sort-by-label"
    labelId="sort-by-label"
    id="sort-by"
    value={sortBy}
    onChange={handleSortByChange}
    variant="outlined"
  >
    {keys.map((key) => (
      <MenuItem key={key} value={key}>
        {key}
      </MenuItem>
    ))}
  </Select>
</FormControl>

// equivalent TextField implementation that seems to have a functional label
<TextField
  select
  value={sortBy}
  onChange={handleSortByChange}
  variant="outlined"
  label="Sort By"
  InputLabelProps={{ shrink: true }}
>
  {keys.map((key) => (
    <MenuItem key={key} value={key}>
      {key}
    </MenuItem>
  ))}
</TextField>

【讨论】：