Random outer border in Material UI

Question

I'm working on a React app and am using Material UI for most of my frontend styling, and I've found one weird little bug that I can't seem to figure out. On some of my pages I have a random small white border all the way around the edge of the page, and then on others the border is gone. Any ideas how I can get rid of the border on all pages?

Here's my code:

App.js

function App() {
    return (
        <div style={{backgroundColor: '#D3D3D3'}}>
            <Header />
            <h1>Gas App</h1>
            <Switch>
                <Route exact path="/register" component={Register} />
                <Route exact path="/login" component={Login} />
                <Route exact path="/logout" component={Logout} />

                <Route exact path="/cars" component={AllCars} />
                <Route exact path="/cars/register" component={CreateCar} />
                <Route exact path="/cars/edit/:id" component={EditCar} />
                <Route exact path="/cars/delete/:id" component={DeleteCar} />

                <Route exact path="/fillups" component={AllFillups} />
                <Route exact path="/fillups/new" component={CreateFillup} />
                <Route exact path="/fillups/edit/:id" component={EditFillup} />
                <Route exact path="/fillups/delete/:id" component={DeleteFillup} />

                <Route path="/:user" component={Profile} />
                

                <Route component={PageNotFound} />
            </Switch>
            <Footer />
        </div>

    )
}

Profile.js (has the random white border)

export default function Profile() {

    const location = useLocation();
    console.log('Location=' + location.pathname.split("/")[2]);

    const { user } = useParams();
    let { path, url } = useRouteMatch();

    const [cars, setCars] = useState(null)
    const [fillups, setFillups] = useState(null)
    const { username } = useContext(Context);

    const locationToValue = (location) => {
        switch(location) {
            case 'stats':
                return 1;
            case 'fillups':
                return 2;
            case 'cars':
                return 3;
            default:
                return 0;
        }

    };

    const classes = useStyles();
    const [value, setValue] = useState(locationToValue(location.pathname.split("/")[2]));

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    useEffect(() => {
        // Promise.all([
        //     axiosInstance.get('/fillups/?user__user_name=' + user),
        //     axiosInstance.get('/cars/?user__user_name=' + user)
        // ]).then(function ([res1, res2]) {
        //     setFillups(res1.data)
        //     setCars(res2.data);
        // });
        console.log('Value=' + value);
        console.log('Path=' + path);
        console.log('URL=' + url);
    }, [value]);

    return (
        <>
            <h1>{user}'s Profile</h1>
            <div className={classes.root}>
                <AppBar position="static">
                    <Tabs value={value} onChange={handleChange} aria-label="simple tabs example" variant="fullWidth">
                        <Tab label="Overview" component={Link} to={`${url}`} {...a11yProps(0)} />
                        <Tab label="Stats" component={Link} to={`${url}/stats`} {...a11yProps(1)} />
                        <Tab label="Fillups" component={Link} to={`${url}/fillups`} {...a11yProps(2)} />
                        <Tab label="Cars" component={Link} to={`${url}/cars`} {...a11yProps(3)} />
                    </Tabs>
                </AppBar>

                <Switch>
                    <Route exact path={`${path}`}>
                        <ProfileOverview user={user} />
                    </Route>

                    <Route exact path={`${path}/stats`}>
                        <ProfileStats user={user} />
                    </Route>

                    <Route exact path={`${path}/fillups`}>
                        <ProfileFillups user={user} />
                    </Route>

                    <Route exact path={`${path}/cars`}>
                        <ProfileCars user={user} />
                    </Route>
                </Switch>
            </div>
        </>
    )
}

and CreateCar.js (no white border)

const useStyles = makeStyles((theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(3),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),
    },
}));

export default function CreateCar() {

    const classes = useStyles();

    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Typography component="h1" variant="h5">
                    Register New Car
                </Typography>
                <form className={classes.form} noValidate>
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                id="car_name"
                                label="Car Name"
                                name="car_name"
                                autoComplete="car_name"
                                onChange={handleChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                id="make"
                                label="Make"
                                name="make"
                                autoComplete="make"
                                onChange={handleChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                variant="outlined"
                                required
                                fullWidth
                                id="model"
                                label="Model"
                                name="model"
                                autoComplete="model"
                                onChange={handleChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <FormControl fullWidth variant="outlined" className={classes.formControl}>
                                <InputLabel>Model Year</InputLabel>
                                <Select
                                    required
                                    onChange={handleSelectChange}
                                    id="model_year"
                                    label="Model Year"
                                    name="model_year"
                                    autoComplete="model_year"
                                    value={formData.model_year}
                                >
                                    {
                                    model_year_range.map((year) => (
                                        <MenuItem value={year}>{year}</MenuItem>
                                    ))
                                    }
                                </Select>
                            </FormControl>
                        </Grid>
                        <Grid item xs={12}>
                            <FormControl fullWidth variant="outlined" className={classes.formControl}>
                                <InputLabel>Status</InputLabel>
                                <Select
                                    required
                                    onChange={handleChange}
                                    id="status"
                                    label="status"
                                    name="status"
                                    autoComplete="status"
                                    value={formData.status}
                                >
                                    <MenuItem value="Active">Active</MenuItem>
                                    <MenuItem value="Inactive">Inactive</MenuItem>
                                </Select>
                            </FormControl>
                        </Grid>
                    </Grid>
                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                        onClick={handleSubmit}
                    >
                        Register Car
                    </Button>
                </form>
            </div>
        </Container>
    );
}

Answer 1

I was using the bootstrap class container and I got padding around because of that

Answer 2

I figured out my issue while trimming my code for an easier to read question. In the component that did not have the issue, I had the whole component wrapped in a container, with the cssbaseline MUI component included, while the component that had the border did not. So the return statement of my Profile component is now as follows:

return (
        <Container component="main">
            <CssBaseline />
            <h1>{user}'s Profile</h1>
            <div>
                {other component stuff here}
            </div>
        </Container>
    )
}