Material-UI AppBar Not Listening to Margins? Here’s the 10 Second Fix.

I had a React component like this:

Notice the `marginLeft` value.

The problem I had was that my AppBar was ignoring the marginLeft value.

The reason for this was that AppBar is of position='fixed' by default (as indicated in the docs).

The Solution

Changing the <AppBar className='classes.appBar'> to <AppBar className='classes.appBar' position='relative'> resolved the issue, causing AppBar to start listening to the margin value.