Material UI 中的随机外边框

Question

我正在开发一个 React 应用程序，并且在我的大部分前端样式中使用 Material UI，我发现了一个我似乎无法理解的奇怪的小错误出去。在我的一些页面上，我有一个 random small white border all the way around the edge of the page, and then on others the border is gone。有什么办法可以去除所有页面上的边框吗？

这是我的代码：

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（有随机白边）

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>
        </>
    )
}

和CreateCar.js（无白边）

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

我在整理代码以获得更易于阅读的问题时发现了我的问题。在没有问题的组件中，我将整个组件包装在一个容器中，包括 cssbaseline MUI 组件，而有边框的组件则没有。所以我的 Profile 组件的 return 语句现在如下所示：

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

Answer 2

我正在使用 bootstrap class container 并且因此得到了填充

Material UI 中的随机外边框

Random outer border in Material UI

reactjs

material-ui