如何在material-ui的屏幕中间创建拼写错误？

问题描述

显然，我在设计材料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 question asked by someone else中看到的这种方法，但所做的只是将字体居中，但它在页面上增加了额外的空白。

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

• 集中不属于框架一部分的元素的最佳方法是什么？
• 集中作为框架一部分的组件的最佳方法是什么？
• 使用框架对元素/组件进行样式设置和测试的最佳方法是什么？
• 框架的样式如何工作？

解决方法

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