如何调整材质 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'}}/>

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

Answer 2

材质 UI 5.x.x

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

Answer 3

我假设您发布的元素周围有一个

<Grid container>

。 MUI 网格旨在填充空间并管理列宽。似乎您可能需要将外部

<Grid container>

限制为您希望列跨越的总宽度。

另外，请注意，如果您想覆盖所有

<Buttons>

，请在主题中执行此操作...

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

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()}
>

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）

Answer 6

import React from 'react';
import { Grid, Button, makeStyles } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';

const useStyles = makeStyles((theme) => ({
  button: {
    width: 40, // Adjust the width of the buttons as needed
    height: 40, // Adjust the height of the buttons as needed
    borderRadius: '50%', // Make the buttons circular
    minWidth: 0, // Remove minimum width to allow the button to shrink
    padding: 0, // Remove padding to make the buttons smaller
    margin: '0 5px', // Adjust the margin between buttons as needed
  },
}));

class MyComponent extends React.Component {
  state = {
    quantity: 0,
  };

  up = () => {
    this.setState((prevState) => ({
      quantity: prevState.quantity + 1,
    }));
  };

  down = () => {
    this.setState((prevState) => ({
      quantity: Math.max(prevState.quantity - 1, 0),
    }));
  };

  render() {
    const classes = useStyles();

    return (
      <Grid container alignItems="center" justifyContent="center">
        <Grid item>
          <Button className={classes.button} onClick={this.up} variant="outlined">
            <AddIcon />
          </Button>
        </Grid>
        <Grid item>
          <Button className={classes.button} variant="outlined">
            {this.state.quantity}
          </Button>
        </Grid>
        <Grid item>
          <Button className={classes.button} onClick={this.down} variant="outlined">
            <RemoveIcon />
          </Button>
        </Grid>
      </Grid>
    );
  }
}

export default MyComponent;