Can we override some basic MUI components styling with makeStyles?

Question

:D

It is my first time starting a project from scratch with react and MUI and I've been wondering if I've set it right.

I currently want to add some styling using makeStyles to some components offered by Material UI such as Button, Field or Paper.

The thing is, whenever I add some style to one of these components, if the default one has a propriety already defined, my added style won't be taken into account.

For a simple example, I have this very simple Button that's supposed to be rounded and have a dark green background color but it looks like that:

As we can see in the following bits of code, I do try to add some styling but without any success for the button. Meanwhile, the grid component and the div element have their added style taken into account.

<Grid item className={classes.gridItem}>
    <div className={classes.formButtonContainer}>
        <Button onClick={submitForm}>
            Login
        </Button>
    </div>
</Grid>

Below, we can see the styling I added using makeStyles:

export default makeStyles((theme) => ({
    button: {
        width: '100%',
        borderRadius: '25px',
        backgroundColor: '#1db954',
        color: 'white'
    },
    formButtonContainer: {
        textAlign: 'center',
    },
    gridItem: {
        width: '100%'
    },
}));

Online, I've been reading about adding props like InputProps or including overrideStyles in my theme creation but none of it worked so far and that's why I'm enquiring to you all :)

Any suggestion will be appreciated, thanks in advance for reading !

Answer 1

makeStyles -> "The legacy styling solution for Material UI, now deprecated and not recommended for use."

Possible replacement option - styled:

import { styled } from '@mui/system'
...
const MyButton = styled(Button)(({ theme }) => ({
  width: '100%',
  borderRadius: '25px',
  backgroundColor: '#1db954',
  color: 'white',
}))