esto usando material-ui para mi diseño front-end y me encuentro con un problema, a mi splash screen le pose un paddingTop de un 30%, pero al rotar el dispositivo, este 30% se nota demasiado y me lleva todo el contenido al pie de la pagina, lo que intento hacer es detectar la orientación y así agregar o no ese 30% de padding, esto es lo que tengo
const useStyles = makeStyles(()=>({
container: {
display: 'flex',
width: '100%',
height: '97vh',
justifyContent: 'space-around',
alignItems: 'center',
flexDirection: 'column',
paddingTop: window.screen.width > window.screen.height ? 0 : '30%' //esta es la condicion que agregue, pero no tiene efecto
},
img: {
width: 100,
height: 'auto'
}
}))