MUI 中的 Select 周围的轮廓边框不遵守收缩 = {true} 并与标签文本重叠

Question

我有以下组件：

import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { useState } from 'react';

export default function AccessDashboardAuditYesNo({
  label,
  name
}: {
  label: string;
  name: string;
}) {
  const [value, setValue] = useState<string>('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <FormControl fullWidth sx={{ mt: 2 }}>
      <InputLabel shrink={true} id='yesno-label'>
        {label}
      </InputLabel>
      <Select
        fullWidth
        labelId='yesno-label'
        id={name}
        name={name}
        label={label}
        value={value}
        onChange={handleChange}
      >
        <MenuItem value=''></MenuItem>
        <MenuItem value='true'>Yes</MenuItem>
        <MenuItem value='false'>No</MenuItem>
      </Select>
    </FormControl>
  );
}

但是，当它显示时，它是这样显示的（注意字段轮廓与标签文本重叠）：

我所做的就是在

shrink={true}

上指定

InputLabel

，但这似乎破坏了边框调整。

这里的解决方案是什么？

Answer 1

将

notched

添加到

<Select />

组件

<FormControl fullWidth sx={{ mt: 2 }}>
  <InputLabel shrink={true} id="yesno-label">
    {label}
  </InputLabel>
  <Select
    notched
    fullWidth
    labelId="yesno-label"
    id={name}
    name={name}
    label={label}
    value={value}
    onChange={handleChange}
  >
    <MenuItem value=""></MenuItem>
    <MenuItem value="true">Yes</MenuItem>
    <MenuItem value="false">No</MenuItem>
  </Select>
</FormControl>

https://stackblitz.com/edit/react-e5srhk?file=Demo.tsx

来源