需要对齐和样式 MUI 图标按钮和文本输入

Question

I have designed a modal dialog that uses increment & decrement buttons on text-input values. I need to align and put some style to it. as per the image it's not really looking good. anyway, it does the functions.

I want something like this for adult tickets I don't need +/- buttons Code

    <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>


  [1]: https://i.stack.imgur.com/YQQYf.png

Answer 1

Wrap the IconButtons and the TextField in a flexbox div, as follows.

<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>

Answer 2

The easiest way is to use the Stack component that gives you out of the box all the attributes you need to have the desired result.

In this codesandbox is your solution, (I had to replace some of the state stuff for the values.) Please note that I also had to remove some of the css you has added as it was wrong.

Here is you refactored code, note that you had to import the Stack component

import Stack from "@mui/material/Stack";

<ul>
    <li>
      <Stack
      direction="row"
      justifyContent="flex-start"
      alignItems="center"
      spacing={1}
      my={2}
    >
      Adult Tickets &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
      <TextField
        value={AdSeatCount}
        id="outlined-adornment-small-Adult"
        variant="outlined"
        size="small"
        style={{ width: 48 }}
        labelWidth={0}
        disabled="true"
      />
    </Stack>
  </li>
  <li>
  <Stack
      direction="row"
      justifyContent="flex-start"
      alignItems="center"
      spacing={1}
      my={2}
    >
    Child Tickets
    
      <IconButton
        onClick={this.onMinusClick}
        aria-label="minus"
        
      >
        <RemoveCircleIcon fontSize="inherit" />
      </IconButton>
      <TextField
        value={this.state.value}
        id="outlined-adornment-small-Child"
        variant="outlined"
        size="small"
        style={{ width: 48}}
        labelWidth={0}
        disabled="true"
      />
      <IconButton
        onClick={this.onPlusClick}
        aria-label="plus"
        
      >
        <AddCircleIcon fontSize="inherit" />
      </IconButton>
    </Stack>
    
  </li>
</ul>