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

IT技术 reactjs button material-ui
2021-05-14 06:56:59

我在这里有这个代码：

我想有 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>
3个回答

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

例如：

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

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

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

另外，请注意，如果您想覆盖 all <Buttons>，请在主题中进行...

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

材质 UI 5.xx

createTheme({
  components: {
    MuiButton: { 
      styleOverrides: { 
        root: { minWidth: 0 } 
      } 
    }
  }
})
其它你可能感兴趣的问题
上一篇这叫什么，我在哪里可以买到替代品？ 下一篇什么是好的 PLA 灯丝？