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

Question

我有这段代码：

我想要三个带有加减符号的小正方形按钮和一个中间带有数字的按钮。 我正在使用 Material。 现在的按钮是长方形的，对我的应用程序来说太大了。 我的问题是我无法让它们变成正方形并调整大小。我尝试了很多方法，但都没有成功。 谢谢

     <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>

- Charlote22

Answer 1

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

例如：

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

在这种情况下，按钮始终呈正方形，并具有固定大小（30px）。

- Mikhail Katrin

---

对我来说，按钮的边缘仍然是圆形的。 - Paul Velthuis

遇到了类似的问题，上述提出的解决方案并没有起作用。 - MadHatter

太棒了 - 这真的有效！为什么同时设置maxWidth和minWidth会导致盒子调整大小，但'width'无法响应呢？ - Jake Cronin

Answer 2

Material UI 5.x.x

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

- Sultan Aslam

Answer 3

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

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

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

- doublejosh

---

请在代码中提供更多上下文，看到 createMuiTheme 的使用情况会更有帮助。 - Jake Cronin

Answer 4

<Button
  fullWidth
  variant="outlined"
  startIcon={<CloudUploadIcon />}
  style={{ textTransform: "none", padding: "14px 0px" }} //button Size change in React Material Ui
  className={classes.btnFont}
  onClick={() => ref.current.click()}
>

- shazeen98

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 5

影响 MUI 按钮宽度的两种样式是 min-width 和 padding，这些来自于类 MuiButton-root。如果你想编辑所有按钮，上面 Sultan Aslam 的解决方案应该有效。

但是，如果你尝试直接在 <Button> 中通过 style 或 sx 应用样式（即使使用了 !important），这样可能无法覆盖这些样式，因为特定度的原因，你必须将样式应用为一个类。你可以像这样做：

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  customIconButton: {
    minWidth: "10px",
    padding: "5px"
  },
});

在你的React组件中：

const classes = useStyles();

然后，在你的按钮中添加

className={classes.customIconButton}

（对于组件的元素，情况变得更加复杂：https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles）

- ktt