MUI 选择标签未正确适合焦点

Question

我正在使用 MUI 选择组件，我遇到的问题是标签不适合焦点并开始与下拉字段本身重叠，如下面的屏幕截图所示：

（https://i.sstatic.net/Xs63CDcg.png）

如何解决此问题，以便无论标签文本长度如何，每个下拉菜单上的标签都能在焦点上正确调整大小？下面是代码片段：

                           <FormControl
                                sx={{
                                    width: "100%",
                                    "& .MuiOutlinedInput-root": {
                                        "&.Mui-focused fieldset": {
                                            borderColor: "#a6a8a7",
                                        },
                                    },
                                }}
                            >
                                <InputLabel
                                sx={{
                                    fontSize: "13px",
                                    "&.Mui-focused": {
                                        color: "black",
                                        fontSize: "14px",
                                    },
                                }}>
                                    Please select the reason for declining the request:
                                </InputLabel>
                                <Select
                                    label="Please select the reason for declining the request:"
                                >
                                    <MenuItem value={1}>Redirect to another person</MenuItem>
                                </Select>
                            </FormControl> 

我尝试调整凹口轮廓的宽度，但这并没有改变任何东西：

"& .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline":
                                       {
                                           width: "auto",
                                       },

我的 TextField 没有这个问题，只有 Select 有这个问题。 谢谢您的宝贵时间！

Answer 1

如果您要更改

InputLabel

的字体大小，请在 Select

sx

属性中添加字体大小。检查下面更新的代码：

<FormControl
    fullWidth
    sx={{
      '& .MuiOutlinedInput-root': {
        '&.Mui-focused fieldset': { borderColor: '#a6a8a7' },
      },
    }}
  >
    <InputLabel
      id="my-label-id"
      sx={{
        fontSize: 14,
        '&.Mui-focused': { color: 'black' },
      }}
    >
      Please select the reason for declining the request:
    </InputLabel>
    <Select labelId="my-label-id" label="Please select the reason for declining the request:" sx={{ fontSize: 14 }}>
      <MenuItem value={1}>Redirect to another person</MenuItem>
    </Select>
</FormControl>

一些改进：

• 您可以在

  fullWidth

  中使用

  {width: '100%'}

  属性代替

  FormControl

  。
• 您不需要在字体大小中添加“px”。就像这样写数字

  fontSize: 14

  。 MUI 默认情况下将数字视为

  px

  字体大小。
• 删除了

  '&.Mui-focused': { color: 'black' },

  内的字体大小。
• 将

  id="my-label-id"

  添加到

  <InputLabel>

  并在

  labelId="my-label-id"

   中共享 

  <Select>