How to resize a React Material UI button?

Sometimes, we want to resize a React Material UI button.

In this article, we’ll look at how to resize a React Material UI button.

How to resize a React Material UI button?

To resize a React Material UI button, we set can the style prop of the Button to an object that sets the dimensions of the button.

For instance, we write:

import * as React from "react";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div>
      <Button
        style={{
          maxWidth: "50px",
          maxHeight: "50px",
          minWidth: "30px",
          minHeight: "30px"
        }}
      >
        hello
      </Button>
    </div>
  );
}

We add a button by adding the Button component.

And we set the style prop of the button to an object that has the maxWidth, maxHeight, minWidth and minHeight properties.

They set the max width, max height, min width, and min height of the button.

Conclusion

To resize a React Material UI button, we set can the style prop of the Button to an object that sets the dimensions of the button.