Answer a question

So the documentation on Button component has various sections and also a Codesandbox linked at https://codesandbox.io/s/npie4

However, there is nowhere mentioned how to change the shape of a button if needed.

I am using Google Material Sketch file and I want the buttons to be rounded

How can I do that using the theme object so that in my entire app the Button component are always rounded?

Answers

There is a global border radius shape value in the theme. You can change it like this:

const theme = createMuiTheme({
  shape: {
    borderRadius: 8,
  }, 
}) 

Alternatively, if you are only interested in the button style:

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        borderRadius: 8,
      }, 
    }, 
  }, 
}) 

Or, you could target the global class name of the button:

.MuiButton-root {
  border-radius: 8px;
}