javascript - 如何在 React 中使用 Material UI 定义背景图像来填充屏幕并删除左侧和右侧的边缘？

Question

我正在使用 Material-UI 和 React。在登录页面中，我想用图像填充 Paper 组件后面的页面背景。我将图像的 backgroundSize 设置为 cover，但它仍然在屏幕的左侧和右侧留下白色边缘。

这是我的登录组件:

const style = theme => ({
    content: {
        minHeight: '900px',
        backgroundImage: `url(${imageUrl})`,
        backgroundPosition: '50%',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    },
    paper: {
        flexGrow: 1,
        padding: theme.spacing(2),
        maxWidth: 300,
        margin: 'auto',
    },
});


class Login extends Component {

    componentDidMount() {
        if (localStorage.getItem('usertoken') !== null) {
            this.props.history.push('/');
        }
    }

    render() {
        const {classes} = this.props;
        return (
        <div className={classes.content}>
                <br/>
                <Typography variant='h3'>Login</Typography>
                <br/>
                <Paper className={classes.paper}>
                    <Grid container direction='column' justify='space-between' alignItems='center' spacing={1}>
                     //Formik Field inside  
                    </Grid>
                </Paper>
       </div>
)}}
Login.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(style)(Login);

我的 app.js 看起来像这样:

<ErrorHandler>
                <ThemeProvider theme={customTheme}>
                    <Router history={history}>
                        <MainHeader/>
                        <Switch>
                            <Route path='/login' component={Login}/>
                            <Route component={NotFoundPage}/>
                        </Switch>
                        <Footer/>
                    </Router>
                </ThemeProvider>
</ErrorHandler>

我没有在 app.js 中定义任何边距。

提前非常感谢您!

Answer 1

如果您不担心宽高比

let w = window.innerWidth;
let h = window.innerHeight;
...
backgroundSize: w + 'px ' + h + 'px';

有几种方法可以处理它 - 这也可能有帮助 https://stackoverflow.com/a/25496015/4241624