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

Question

我设计了一个模态对话框，它在文本输入值上使用增量和递减按钮。我需要调整一下，并给它添加一些风格。从图片上看，它看起来不太好。不管怎么说，它起作用了。

​

我想要这样的成人票，我不需要+/-纽扣

代码

    <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

将IconButtons和TextField包装在挠曲箱 div中，如下所示。

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

为了水平对齐，这里有一些伪代码来保持事物的清洁。

<div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gridTemplateRows: "auto auto" }}>
  <AdultLabel style={{ gridColumn: "1 / 2", gridRow: "1 / 2" }} />
  <AdultInput style={{ gridColumn: "2 / 3", gridRow: "1 / 2" }} />
  <ChildLabel style={{ gridColumn: "1 / 2", gridRow: "2 / 3" }} />
  <ChildInput style={{ gridColumn: "2 / 3", gridRow: "2 / 3" }} />
</div>

当然，如果您使用CSS文件，您将保持一切清洁，如下所示：

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}

.label {
  grid-column: 1 / 2;
}

.labelAdult {
  grid-row: 1 / 2;
}

.labelChild {
  grid-row: 2 / 3;
}

.label {
  align-items: center;
  justify-content: center;
  text-align: center;
}

Answer 2

最简单的方法是使用Stack组件，它为您提供所需的所有属性，以获得所需的结果。

在这个码箱中，您的解决方案是(我不得不为值替换一些状态内容)。请注意，我还必须删除一些css您已经添加了，因为它是错误的。

下面是重构代码，请注意，您必须导入Stack组件

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>