reactjs - 如何调整 Material-ui 按钮的大小

Question

我这里有这个代码:

我正在尝试使用 3 个带有 + 和 - 符号的小方形按钮，中间有一个带有数字的按钮。我正在使用 Material 。现在按钮是矩形的，对于我的应用程序来说太大了。我的问题是我无法将它们调整为正方形并调整它们的大小。我已经尝试了很多东西，但它不起作用。谢谢

     <Grid item>
        <Button onClick={this.up} variant="outlined">
          <Add color="secondary" />
        </Button>
        <Button style={{ padding: "11px 0px" }} variant="outlined">
          {this.state.quantity < 1 ? 0 : this.state.quantity}
        </Button>
        <Button onClick={this.down} variant="outlined">
          <Remove color="secondary" />
        </Button>
      </Grid>

Answer 1

您可以添加最大/最小宽度/高度样式选项。

例如:

<Button style={{maxWidth: '30px', maxHeight: '30px', minWidth: '30px', minHeight: '30px'}}/>

在这种情况下，按钮始终看起来像一个正方形，并且具有固定大小(30px)。