CODEWITHSUNDEEP
cssreactjsmaterial-uifrontend
Chandler Bing
Chandler Bing

Reputation: 97

How do I change the default padding that Material-UI seems to apply to all its components

The AppBar component for instance doesn't cover the whole area by default, I looked through the documentation and on google but couldn't find a solution for it.

I also tried changing the spacing in createMuiTheme for my Layout component which included the AppBar and {props.children} at the end. That didn't seem to do anything.

Tl;dr : I want the app bar and all the other components to cover the whole screen, use the whole screen as a flex without padding which material-ui seems to be adding to it by default.

Wish it could cover the whole width of page instead of leaving those margins

Upvotes: 0

Views: 2227

Answers (1)

Muhammad Ali
Muhammad Ali

Reputation: 2648

This is the margin given by the body of html document. You have to apply following styles:

body {
  margin: 0;
}

If you're using JSS solution that is given by material-ui then add following in your root styles object:

{
  // ...

  '@global': {

    // ... global styles here

    body: {
      margin: 0,
    }
  }
}

Upvotes: 1

Related Questions