MUI 选择边框未延伸到标签、空白

Question

我正在尝试使用

@mui/material/Select

渲染下拉菜单，并希望顶部边框延伸到标签旁边。现在，标签和下拉 div 的右边缘之间有空白。我检查了开发工具，我唯一能识别的边框属性是

border-radius

。有没有办法让边框延伸到标签边缘旁边？

渲染下拉菜单

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

Answer 1

我遇到了同样的问题，无法使用

Select

组件解决它，但我确实找到了解决方法。就我而言，不设置值或默认值似乎可以解决标签问题，但我的输入必须受到控制。

所做的工作是使用

TextField

组件，并通过

select

将

InputLabelProps={{ shrink: true }}

属性设置为true。

这是我原来的 Select 组件，我无法修复其标签，后面是一个有效的等效 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>