0

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'
   }
 }))

1 respuesta 1

2

Yo lo que haría sería crear una clase CSS específica para cuando la condición window.screen.width > window.screen.height no se cumple.

De esta forma lo controlas directamente en el componente y no incluyes lógica JS en los ficheros de estilos.

Por ejemplo:

<div className={[
    styles.container,
    window.screen.width > window.screen.height ? null : styles.anotherStyle
].filter(Boolean).join(' ')}>
    Foobar
</div>

Y en el fichero de estilos creas una clase específica anotherStyle.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.