Apparently I'm having such a hard time styling material-ui components, maybe it's my poor knowledge of the framework, nevertheless let's judge that when I'm done explaining the situation.
I have a landing page that displays a video as the background and what I want is to add other components to the center of that video screen like typographies.
here's my component:
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>
)
}
I tried this method which I saw in another stackoverflow question asked by someone else but all it did was to center the typography but it added extra white space to the page.
So the main questions I would like to know the answers to really are:
- what is the best way to centralize an element which is not a part of the framework?
- what is the best way to centralize a component that IS a part of the framework?
- what is the best way to style an element/component and test it when using the framework?
- how does the framework's styling work?
