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

Posted 2023-02-22

【中文标题】如何调整material-ui按钮的大小

【英文标题】：How to resize a material-ui button

【发布时间】：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>

【参考方案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  
       
    
  
)