时间戳

首页 > 解决方案 > 如何在material-ui中的屏幕中间创建一个排版？

javascript - 如何在material-ui中的屏幕中间创建一个排版？

问题描述

显然，我很难为 Material-ui 组件设计样式，也许是我对框架的了解不足，但是当我解释完情况后，让我们来判断一下。

我有一个登录页面，它显示一个视频作为背景，我想要将其他组件添加到该视频屏幕的中心，如排版。

这是我的组件：

import React, {Fragment, useState} from 'react'
import {createStyles, Grid, makeStyles, Typography} from '@material-ui/core'
import DrawerC from '../components/drawer'
import AppbarC from '../components/appbar'
import background from '../assets/background.mp4'

const useBackgroundStyle = makeStyles((theme)=>createStyles({
    root:{
        width: '100%',
        height: '100%',
        overflowX: 'hidden'
    },
    typographyMiddle:{
∎∎∎∎∎∎ SOME STYLING TO POSITION THE TYPOGRAPHY IN THE MIDDLE ∎∎∎∎∎∎
        position: 'absolute',
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
    },
    [theme.breakpoints.down('md')]:{
        root:{
            width: window.screen.width,
            height: window.screen.height,
            objectFit: 'cover',
            objectPosition: '20% 0%',
            overflowX: 'hidden'
        }
    }

}))

export default function () {
    const backgroundStyle = useBackgroundStyle()
    const [drawerState, handleDrawerState] = useState(false)
    const [datepickerState, handleDatepicker] = useState(false)

    return(
        <Fragment>
        <AppbarC handleDrawerState={handleDrawerState} handleDatepicker={handleDatepicker} />
        ∎∎∎∎∎∎ THIS IS THE PART OF THE CODE THAT MATTERS ∎∎∎∎∎∎
        <video autoPlay='autoplay' muted loop id="myVideo" className={backgroundStyle.root}>
            <source src={background} type="video/mp4" />
        </video>

        <Grid
            container
            spacing={0}
            direction="column"
            alignItems="center"
            justify="center"
            style={{ minHeight: '100vh' }}
            className={backgroundStyle.typographyMiddle}
        >
            <Typography className={backgroundStyle.typographyMiddle}> THIS IS A TEST </Typography>
        </Grid>
        ∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
        <DrawerC state={drawerState} handleDrawerState={handleDrawerState} />
    </Fragment>
    )
}

我尝试了这种方法，我在其他人提出的另一个 stackoverflow 问题中看到了这种方法，但它所做的只是将排版居中，但它为页面添加了额外的空白。

所以我想知道答案的主要问题是：

标签： javascriptcssreactjsmaterial-uijss

解决方案

您应该能够在父（包装器）组件上使用“位置：相对”，然后在子组件上使用“位置：绝对”，并使用 % + vh 您可以将子组件放置在父组件中的任何位置。

推荐阅读