如何对齐并样式化MUI图标按钮与文本输入组件

我做了一个模态对话框，已经实现通过增减按钮控制输入框数值的功能，但当前样式排版不佳，希望优化布局与样式，其中成人票输入框无需增减按钮。

原代码 #

<ul>
  <li> 
    Adult Tickets &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp;
    <TextField
      value={AdSeatCount}
      id="outlined-adornment-small-Adult"
      variant="outlined"
      size="small"
      style={{ width: 48, height: 35}}
      labelWidth={0}
      disabled="true"
    />
    <br/>
  </li>
  <li>Child Tickets
    <div style={{ display: "flex", alignItems: "center" }}>                                 
      <IconButton
        onClick={this.onMinusClick}
        aria-label="minus"
        style={{ marginTop: 15 }}
      >
        <RemoveCircleIcon fontSize="inherit" />
      </IconButton>
      <TextField
        value={this.state.value}
        id="outlined-adornment-small-Child"
        variant="outlined"
        size="small"
        style={{ width: 48, height: 35 ,marginTop: 15}}
        labelWidth={0}
        disabled="true"
      />
      <IconButton
        onClick={this.onPlusClick}
        aria-label="plus"
        style={{ marginTop: 15 }}
      >
        <AddCircleIcon fontSize="inherit" />
      </IconButton>
    </div>
  </li>
</ul>

优化后的代码 #

import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import IconButton from '@material-ui/core/IconButton';
import RemoveCircleIcon from '@material-ui/icons/RemoveCircle';
import AddCircleIcon from '@material-ui/icons/AddCircle';

// 集中管理样式
const useStyles = makeStyles({
  ticketList: {
    listStyle: 'none',
    padding: 0,
    width: '260px', // 可根据模态框宽度调整
  },
  listItem: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: '14px',
  },
  ticketLabel: {
    fontSize: '14px',
    fontWeight: 500,
    color: '#333',
  },
  inputGroup: {
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
  },
  countInput: {
    width: 48,
    '& .MuiOutlinedInput-root': {
      height: 35,
    },
  },
});

// 组件内部使用
const classes = useStyles();

return (
  <ul className={classes.ticketList}>
    {/* 成人票项 */}
    <li className={classes.listItem}>
      <span className={classes.ticketLabel}>成人票</span>
      <TextField
        value={AdSeatCount}
        id="outlined-adornment-small-Adult"
        variant="outlined"
        size="small"
        className={classes.countInput}
        labelWidth={0}
        disabled
      />
    </li>
    {/* 儿童票项 */}
    <li className={classes.listItem}>
      <span className={classes.ticketLabel}>儿童票</span>
      <div className={classes.inputGroup}>
        <IconButton
          onClick={this.onMinusClick}
          aria-label="减少数量"
          size="small"
        >
          <RemoveCircleIcon fontSize="small" />
        </IconButton>
        <TextField
          value={this.state.value}
          id="outlined-adornment-small-Child"
          variant="outlined"
          size="small"
          className={classes.countInput}
          labelWidth={0}
          disabled
        />
        <IconButton
          onClick={this.onPlusClick}
          aria-label="增加数量"
          size="small"
        >
          <AddCircleIcon fontSize="small" />
        </IconButton>
      </div>
    </li>
  </ul>
);

优化要点 #

• 布局规范化：用Flex布局替代 和<br/>实现对齐，每个票种项左右分布，视觉更整洁
• 样式集中管理：通过makeStyles统一控制间距、字体、尺寸，避免零散内联样式，便于后续维护
• 视觉统一：统一两个票种项的行高、间距，按钮和输入框尺寸匹配，整体风格一致
• 细节优化：调整按钮为small尺寸，和输入框高度适配，用gap控制按钮与输入框的间距，让组件更紧凑协调

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