如何調整 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

您可以添加最大/最小寬度/高度樣式選項。

例如：

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

在這種情況下，按鈕將始終看起來像一個正方形並且具有固定大小（30 像素）。

Answer 2

我假設您在發布的元素周圍有一個<Grid container> 。 MUI 網格旨在填充空間並管理列寬。 似乎您可能需要將外部<Grid container>限制為您希望列跨越的總寬度。

另外，請注意，如果您想覆蓋所有<Buttons> ，請在主題中進行...

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

Answer 3

材質 UI 5.xx

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