MUI选择边框不延伸到标签，空白

Question

我正在尝试使用@mui/material/Select呈现下拉列表，并希望顶部边框延伸到标签旁边。现在标签和下拉div的右边缘之间有空白。我检查了dev工具，唯一能识别的边界属性是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

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

实际工作是使用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>