如何将React MUI的TextField与Select组件组合为一体化样式？

要实现输入框和单位选择器无缝衔接的样式，核心是通过自定义样式覆盖MUI组件默认的圆角和边框，让两个组件相邻的边合并成一体，具体方案如下：

实现步骤与代码示例 #

可以直接通过sx内联样式快速定制，也可以用styled组件封装复用：

方式一：使用sx内联样式 #

import { Box, TextField, Select, MenuItem, InputLabel, FormControl } from '@mui/material';

function UnitInput() {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      {/* 数值输入框：去掉右侧圆角和边框 */}
      <TextField
        label="数值"
        variant="outlined"
        sx={{
          '& .MuiOutlinedInput-root': {
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
            // 处理默认、hover、focus状态下的右边框
            fieldset: { borderRight: 0 },
            '&:hover fieldset': { borderRight: 0 },
            '&.Mui-focused fieldset': { borderRight: 0 },
          },
          mr: -1, // 消除组件间默认间距，让两者紧密贴合
        }}
      />
      {/* 单位选择器：去掉左侧圆角和边框 */}
      <FormControl variant="outlined" sx={{ minWidth: 100 }}>
        <InputLabel>单位</InputLabel>
        <Select
          label="单位"
          sx={{
            '& .MuiOutlinedInput-root': {
              borderTopLeftRadius: 0,
              borderBottomLeftRadius: 0,
              // 处理默认、hover、focus状态下的左边框
              fieldset: { borderLeft: 0 },
              '&:hover fieldset': { borderLeft: 0 },
              '&.Mui-focused fieldset': { borderLeft: 0 },
            },
          }}
        >
          <MenuItem value="Bytes">Bytes</MenuItem>
          <MenuItem value="KiB">KiB</MenuItem>
          <MenuItem value="MiB">MiB</MenuItem>
          <MenuItem value="GiB">GiB</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

export default UnitInput;

方式二：使用styled组件封装（适合多处复用） #

import { styled } from '@mui/material/styles';
import { TextField, Select, FormControl, Box, MenuItem, InputLabel } from '@mui/material';

// 定制左侧输入框样式
const StyledNumberTextField = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    fieldset: { borderRight: 0 },
    '&:hover fieldset': { borderRight: 0 },
    '&.Mui-focused fieldset': { borderRight: 0 },
  },
  marginRight: -1,
}));

// 定制右侧选择器样式
const StyledUnitSelect = styled(Select)(({ theme }) => ({
  '& .MuiOutlinedInput-root': {
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    fieldset: { borderLeft: 0 },
    '&:hover fieldset': { borderLeft: 0 },
    '&.Mui-focused fieldset': { borderLeft: 0 },
  },
}));

function UnitInput() {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <StyledNumberTextField label="数值" variant="outlined" />
      <FormControl variant="outlined" sx={{ minWidth: 100 }}>
        <InputLabel>单位</InputLabel>
        <StyledUnitSelect label="单位">
          <MenuItem value="Bytes">Bytes</MenuItem>
          <MenuItem value="KiB">KiB</MenuItem>
          <MenuItem value="MiB">MiB</MenuItem>
          <MenuItem value="GiB">GiB</MenuItem>
        </StyledUnitSelect>
      </FormControl>
    </Box>
  );
}

export default UnitInput;

关键样式说明 #

• 用Box的flex布局让两个组件横向对齐，保证高度一致。
• 通过修改borderTopRightRadius/borderBottomRightRadius和borderTopLeftRadius/borderBottomLeftRadius去掉相邻边的圆角。
• 移除相邻侧的边框（borderRight/borderLeft），避免两个组件边框重叠出现双线。
• 设置mr: -1消除组件间的默认间距，让两者无缝贴合。
• 同步处理hover、focus状态下的边框样式，避免交互时出现样式断裂。

如果使用的是filled或standard变体，只需要把样式选择器从MuiOutlinedInput-root换成对应的MuiFilledInput-root或MuiInput-root即可。

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