如何调整Material-UI按钮的大小 [英] How to resize a material-ui button

问题描述

我在这里有此代码:

我正在尝试使用3个带有+和-号的小方形按钮，中间一个带有数字的小按钮.我正在使用材料.现在，这些按钮是矩形的，对于我的应用程序来说太大了.我的问题是我无法让它们成正方形并调整其大小.我已经尝试了很多东西，但是没有用.谢谢

I am trying to have 3 small square buttons with + and - sign and one in the middle with a digit. I am using material. The buttons now are rectangular and too big for my app. My problem is I just can't have them square and resize them. I have tried a lot of things but it doesn't work. Thanks

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

推荐答案

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

You could add max/min width/height style options.

例如:

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

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

In this case button always will look like a square and have a fix size (30px).

这篇关于如何调整Material-UI按钮的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！