How to Get Rid of Padding in Material UI Container Component?

user_13213262 0
Viewed 6110

I am trying to create a hero banner using the material-ui framework.

So far what I have looks as follows:

enter image description here

As you can see, there is annoying left and right padding. I cannot seem to get rid of it.

My Hero component looks like this:

import React from 'react'

import Container from '@material-ui/core/Container'

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
    heroContent: {
        backgroundColor: theme.palette.background.paper,
        padding: theme.spacing(8, 0, 6),
    },
    heroButtons: {
        marginTop: theme.spacing(4),
    },
}))

const Hero = () => {
    const classes = useStyles()

    return <Container className={classes.heroContent}></Container>
}

export default Hero

Can someone please explain how I can get rid of the padding on the left and right, and achieve full width?

I tried setting the paddings in my styles as you can see, but that has no effect. Any guidance is appreciated!

material-ui reactjs css javascript
1 Answers

The disableGutters prop removes the padding.

Example:

import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";

export default function SimpleContainer() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Container disableGutters maxWidth={false}>
        <Typography
          component="div"
          style={{ backgroundColor: "#cfe8fc", height: "100vh" }}
        />
      </Container>
    </React.Fragment>
  );
}

Edit Container disableGutters

Related documentation: https://material-ui.com/api/container/#props

user_74959300
Related