How to override Material UI button styles

I was trying to change

border-radius: 

for my button and I somehow could not change. I found out that Material UI button has default styles and you have to override it in order to change things. So when you change some styles and they are not applied, you should 'inspect' and check if the styles are crossed. Then that means the default styles won over your styles!

I looked at many articled and this worked.

https://material-ui.com/customization/components/ Please look at this document too!

This document says 'When the className property isn't enough, and you need to access deeper elements, you can take advantage of the classes object property to customize all the CSS injected by Material-UI for a given component'.

 <Button classes={{root: classes.button1,}}>
     Confirm
 </Button>

Some articles were suggesting

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

const StyledButton = styled(Button)`
  background-color: red;
  border-radius: 0;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <StyledButton>Hello</StyledButton>
      </div>
    </StylesProvider>
  );
}

But this did not work for me. Since the way I followed is from Material UI official document, I guess it is more reliable.

Give me suggestions or comments if you know better ways or something! Hope this helps :)