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

【问题标题】：How to resize a material-ui button如何调整material-ui按钮的大小
【发布时间】：2018-12-04 23:19:53
【问题描述】：

我这里有这段代码：

我正在尝试使用 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>

【问题讨论】：

标签： reactjs button material-ui

【解决方案1】：

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

例如：

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

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

【讨论】：

对我来说按钮的边缘还是圆的
遇到类似问题，上述建议的解决方案不起作用。
哇——这真的有效！为什么同时设置 maxWidth 和 minWidth 会导致框调整，但它不响应'width'？

【解决方案2】：

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

另外，请注意，如果您想覆盖所有 <Buttons>，请在主题中这样做...

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

【讨论】：

请在代码中提供更多上下文。查看 createMuiTheme 的使用位置会很有帮助

【解决方案3】：

材质 UI 5.x.x

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

【讨论】：