如何调整 material-ui 按钮的大小

Question

我在这里有这个代码：

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

     <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

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

For instance:

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

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

Answer 2

材质 UI 5.xx

createTheme({
  components: {
    MuiButton: { 
      styleOverrides: { 
        root: { minWidth: 0 } 
      } 
    }
  }
})

Answer 3

我假设您对<Grid container>您发布的元素有一个了解。MUI 网格旨在填充空间并管理列宽。看起来您可能需要将外部限制<Grid container>为您希望列跨越的总宽度。

另外，请注意，如果您想覆盖所有<Buttons>，请在主题中执行此操作...

createMuiTheme({
  overrides: {
    MuiButton: {
      outlined: {
        borderRadius: '0'
      }
    }
  }
})