React JS中如何将3个MUI TextField置于同一边框内

直接上可运行的MUI代码实现，完全匹配你要的效果：

import { FormGroup, TextField, Autocomplete, Box } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';

// 统一组件高度的自定义主题
const customTheme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiInputBase-root': {
            height: '56px', // 对齐AutoComplete默认高度
          }
        }
      }
    },
    MuiAutocomplete: {
      styleOverrides: {
        root: {
          '& .MuiInputBase-root': {
            height: '56px',
          }
        }
      }
    }
  }
});

export default function SizeInputGroup() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 外层容器统一边框 */}
      <Box sx={{
        border: '1px solid rgba(0, 0, 0, 0.23)',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        overflow: 'hidden'
      }}>
        {/* 宽度输入框 */}
        <TextField
          label="W"
          size="small"
          disableUnderline
          sx={{
            flex: 1,
            '& .MuiInputBase-input': { padding: '0 14px' },
            '& .MuiInputLabel-root': { paddingLeft: '14px' }
          }}
        />
        {/* 高度输入框，加左侧分隔线 */}
        <TextField
          label="H"
          size="small"
          disableUnderline
          sx={{
            flex: 1,
            borderLeft: '1px solid rgba(0, 0, 0, 0.23)',
            '& .MuiInputBase-input': { padding: '0 14px' },
            '& .MuiInputLabel-root': { paddingLeft: '14px' }
          }}
        />
        {/* 深度输入框，加左侧分隔线 */}
        <TextField
          label="D"
          size="small"
          disableUnderline
          sx={{
            flex: 1,
            borderLeft: '1px solid rgba(0, 0, 0, 0.23)',
            '& .MuiInputBase-input': { padding: '0 14px' },
            '& .MuiInputLabel-root': { paddingLeft: '14px' }
          }}
        />
        {/* 单位选择AutoComplete，加左侧分隔线 */}
        <Autocomplete
          options={['mm', 'cm', 'in', 'ft']}
          renderInput={(params) => (
            <TextField
              {...params}
              size="small"
              disableUnderline
              sx={{
                flex: 1,
                borderLeft: '1px solid rgba(0, 0, 0, 0.23)',
                '& .MuiInputBase-input': { padding: '0 14px' }
              }}
            />
          )}
        />
      </Box>
    </ThemeProvider>
  );
}

关键实现细节 #

• 用Box作为外层容器，统一设置边框、圆角和flex布局，让内部组件横向无缝排列
• 给所有输入组件设置disableUnderline，去掉MUI默认的下划线，避免和外层边框冲突
• 通过自定义Theme统一TextField和Autocomplete的高度，保证视觉对齐
• 中间的组件添加左侧边框作为分隔线，和外层边框颜色保持一致，形成整体感
• 调整输入框内边距，匹配原生MUI组件的排版样式

如果需要修改边框颜色、圆角大小，直接调整Box的sx属性即可，比如把border改成1px solid #your-custom-color，borderRadius改成你需要的数值。

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