如何解决如何在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可以将子组件放置在父组件中的任何位置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。