如何创建包含Input与Select的Material UI自定义复用组件？

核心思路 #

基于Material UI组件封装，用Box作为容器实现Input与Select的并排布局，通过TypeScript定义通用Props保证复用性与类型安全，允许外部传入各组件的原生属性以适配不同场景。

步骤1：定义组件Props类型 #

先通过TypeScript明确组件接收的属性，让Input、Select和容器Box都能透传各自的原生Props，同时保留扩展能力：

import { BoxProps, InputProps, SelectProps } from '@mui/material';

// 组合组件的Props类型
type CombinedInputSelectProps = {
  // Input组件的原生属性
  inputProps: InputProps;
  // Select组件的原生属性
  selectProps: SelectProps;
  // 容器Box的原生属性（可选，用于自定义布局样式）
  boxProps?: BoxProps;
};

步骤2：实现组合组件 #

创建CombinedInputSelect组件，用Box做容器设置默认并排布局，同时透传各组件的属性：

import React from 'react';
import { Box, Input, Select } from '@mui/material';

const CombinedInputSelect: React.FC<CombinedInputSelectProps> = ({
  inputProps,
  selectProps,
  boxProps = {},
}) => {
  return (
    <Box
      display="flex"
      gap={2} // 组件间默认间距，可通过boxProps覆盖
      alignItems="center"
      {...boxProps} // 透传容器属性，允许外部自定义样式
    >
      <Input {...inputProps} />
      <Select {...selectProps}>
        {selectProps.children}
      </Select>
    </Box>
  );
};

export default CombinedInputSelect;

步骤3：复用组件示例 #

在任意页面或组件中直接调用，传入各自的配置属性即可：

import CombinedInputSelect from './CombinedInputSelect';
import { MenuItem } from '@mui/material';
import { useState } from 'react';

const App = () => {
  const [selectedVal, setSelectedVal] = useState('');

  return (
    <div style={{ padding: '20px' }}>
      <CombinedInputSelect
        inputProps={{
          placeholder: '请输入内容',
          onChange: (e) => console.log('输入值:', e.target.value),
        }}
        selectProps={{
          value: selectedVal,
          onChange: (e) => setSelectedVal(e.target.value as string),
          placeholder: '请选择',
        }}
        // 自定义容器样式（可选）
        boxProps={{
          gap: 3,
          flexWrap: 'wrap',
        }}
      >
        <MenuItem value="opt1">选项1</MenuItem>
        <MenuItem value="opt2">选项2</MenuItem>
        <MenuItem value="opt3">选项3</MenuItem>
      </CombinedInputSelect>
    </div>
  );
};

export default App;

扩展优化建议 #

• 全局样式统一：通过Material UI的ThemeProvider自定义主题，或给组件添加固定className覆盖默认样式。
• 表单集成：若需和Formik、React Hook Form配合，可在组件内添加name属性并处理表单onChange逻辑，或直接透传表单相关属性。
• 响应式适配：在boxProps中设置flexDirection: { xs: 'column', sm: 'row' }，实现移动端垂直、桌面端水平的布局切换。

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