如何用FormControl实现多InputBase共享单InputLabel且无警告

我正在构建一个自定义表单组件，需要让多个输入字段共享一个标签，要求任一字段获得焦点时标签自动高亮。目前已通过手动方式实现了该功能，但由于在单个FormControl内放置多个InputBase，触发了MUI的警告：

There are multiple InputBase components inside a FormControl.
This creates visual inconsistencies, only use one InputBase.

我清楚这个警告的原因，也知道这不是FormControl的预期用法，现在想了解有没有MUI官方认可的方案，既能实现多输入框共享标签聚焦高亮的需求，又不会触发警告。

原实现代码片段：

const MyInputBase = styled(InputBase)(({ theme }) => ({
  "label + &": {
    marginTop: theme.spacing(3)
  },
  "& .MuiInputBase-input": {
    backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
    border: "1px solid #ced4da",
    padding: "10px 12px",
    "&:focus": {
      backgroundColor: "rgba(63, 127, 63, 0.1)"
    }
  }
}));

const MyInputLabel = styled(InputLabel)(({ theme }) => ({
  "&.Mui-focused": {
    color: "rgb(63, 175, 63)"
  }
}));

const MyAdornment = ({ children }: { children: React.ReactNode }) => {
  return (
    <InputAdornment position="start">
      <Typography
        sx={{
          fontSize: "12px",
          color: "rgb(83, 127, 83)"
        }}
      >
        {children}
      </Typography>
    </InputAdornment>
  );
};

export default function InputsThatShareALabel() {
  return (
    <Box component="form" noValidate>
      <FormControl variant="standard">
        <MyInputLabel shrink>Medalists</MyInputLabel>
        <MyInputBase startAdornment={<MyAdornment>1ST</MyAdornment>} />
        <MyInputBase startAdornment={<MyAdornment>2ND</MyAdornment>} />
        <MyInputBase startAdornment={<MyAdornment>3RD</MyAdornment>} />
      </FormControl>
    </Box>
  );
}

官方可行方案：手动管理聚焦状态，脱离FormControl上下文 #

MUI没有直接提供多输入框共享标签的专属组件，但可以通过以下符合官方设计规范的方式实现需求并消除警告：

1. 移除外层FormControl：FormControl的设计初衷是为单个输入组件提供上下文，多输入场景下直接移除即可避免警告。
2. 统一管理聚焦状态：用React状态跟踪任一输入框的聚焦状态，控制标签的高亮样式。
3. 保留原有自定义样式：复用你之前定义的标签和输入框样式，保证视觉效果一致。

修改后的代码示例：

import { useState } from 'react';
import { Box, InputBase, InputLabel, InputAdornment, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';

const MyInputBase = styled(InputBase)(({ theme }) => ({
  marginTop: theme.spacing(3),
  "& .MuiInputBase-input": {
    backgroundColor: theme.palette.mode === "light" ? "#fcfcfb" : "#2b2b2b",
    border: "1px solid #ced4da",
    padding: "10px 12px",
    "&:focus": {
      backgroundColor: "rgba(63, 127, 63, 0.1)"
    }
  }
}));

const MyInputLabel = styled(InputLabel)(({ theme }) => ({
  "&.Mui-focused": {
    color: "rgb(63, 175, 63)"
  }
}));

const MyAdornment = ({ children }: { children: React.ReactNode }) => {
  return (
    <InputAdornment position="start">
      <Typography
        sx={{
          fontSize: "12px",
          color: "rgb(83, 127, 83)"
        }}
      >
        {children}
      </Typography>
    </InputAdornment>
  );
};

export default function InputsThatShareALabel() {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => setIsFocused(true);
  const handleBlur = () => setIsFocused(false);

  return (
    <Box component="form" noValidate sx={{ display: 'flex', flexDirection: 'column' }}>
      <MyInputLabel shrink focused={isFocused}>Medalists</MyInputLabel>
      <MyInputBase 
        startAdornment={<MyAdornment>1ST</MyAdornment>} 
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <MyInputBase 
        startAdornment={<MyAdornment>2ND</MyAdornment>} 
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
      <MyInputBase 
        startAdornment={<MyAdornment>3RD</MyAdornment>} 
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
    </Box>
  );
}

方案说明 #

• 彻底移除FormControl，消除MUI的警告提示；
• 通过isFocused状态统一控制标签的高亮，任一输入框聚焦时标签都会同步变色；
• 完全保留你原本的自定义样式逻辑，视觉表现和原实现一致；
• 遵循MUI组件的设计规范，没有使用非预期的组件用法。

内容的提问来源于stack exchange，提问作者aremay