Material UI中Chips占80%输入空间时的换行布局实现方法

要实现Chips占据空间后自动换行、输入框下移的效果，不能依赖InputAdornment（它是行内布局，无法实现自动换行下移），建议将Chips区域与输入框分离，用容器包裹模拟输入框视觉，具体实现如下：

修改后的完整代码 #

import { Box, TextField, Chip, Wrap, WrapItem } from '@mui/material';

// 保留你原有的状态和事件处理函数：inputValue, chips, setInputValue, handleKeyDown, handleBlurChanges, handleDelete, errors

return (
  <Box
    sx={{
      border: ({ theme }) => `1px solid ${errors.tags ? theme.palette.error.main : theme.palette.divider}`,
      borderRadius: theme => theme.shape.borderRadius,
      padding: '8px 12px',
      width: '100%', // 可根据需求调整宽度
      '&:hover': {
        borderColor: ({ theme }) => theme.palette.primary.light,
      },
      '&.Mui-focused': {
        borderColor: ({ theme }) => theme.palette.primary.main,
        boxShadow: ({ theme }) => `0 0 0 2px ${theme.palette.primary.main}20`,
      },
    }}
  >
    {/* Chips自动换行区域 */}
    <Wrap spacing={1} mb={1}>
      {chips.map((chip, index) => (
        <WrapItem key={index}>
          <Chip
            label={chip}
            onDelete={handleDelete(chip)}
            variant="outlined"
            onBlur={handleBlurChanges}
            sx={{ '&:focus': { outline: 'none' } }}
          />
        </WrapItem>
      ))}
    </Wrap>

    {/* 输入框 */}
    <TextField
      value={inputValue}
      error={!!errors.tags}
      onChange={(event) => setInputValue(event.target.value)}
      onKeyDown={handleKeyDown}
      onBlur={handleBlurChanges}
      label="Press enter to add tag"
      name="tags"
      helperText={errors?.tags}
      sx={{
        width: '100%',
        '& .MuiOutlinedInput-root': {
          border: 'none',
          '&:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': { border: 'none' },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
        },
      }}
      InputProps={{ disableUnderline: true }}
    />
  </Box>
);

关键实现点 #

• 外层容器模拟输入框：用Box组件设置边框、圆角，模拟原生输入框的视觉效果，同时处理错误、hover、focus状态的样式变化。
• Chips自动换行：用Wrap和WrapItem组件实现Chips的自动换行，当Chips一行放不下时自动换行，无需手动计算宽度。如果需要精确控制Chips占据80%宽度后换行，可以通过监听Wrap的宽度结合Chips总宽度判断，但自动换行的方式更符合用户直觉。
• 输入框融入容器：去掉输入框默认的边框和下划线，调整内边距，让它和外层容器融为一体，保持整体视觉一致性。
• 保留原有交互逻辑：原有的添加标签（回车）、删除标签、失焦处理等逻辑完全保留，无需修改。

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