La consulta de @media para mostrar un bloque no funciona en @emotion/react
Tengo un estilo como este
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
//inside page.jsx
export function Page() {
return (
<div css="{container}">
<div css="{header}">
<div css="{horizontal}">
<menu mode="horizontal">
<menu.item>
<link href="#">
<a>Menu A</a>
</menu.item>
</menu>
</div>
</div>
</div>
)
}
//inside styles.js
export const horizontal = css`
display: none;
@media (min-width: 720px) {
display:block;
}
`
export const header= css`
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: white;
position: sticky;
top: 0;
z-index: 1;
`
<!-- end snippet -->
Cuando pruebo el navegador con un tamaño menor a 720px, funciona como se esperaba, el contenido es invisible debido a display none, pero cuando el tamaño del navegador vuelve a ser superior a 720px, no funciona en absoluto (no vuelve a ser visible).
Si reemplazo el componente Menu con otro componente, el estilo funciona correctamente (cuando es menor a 720px = invisible y cuando es mayor a 720px = visible). Además, puede funcionar con el componente Menu si se quita display: flex en el estilo del encabezado.
Estoy un poco confundido acerca de lo que está sucediendo aquí.
davy.ai
El problema con el código parece estar relacionado con la interacción entre la propiedad
displayen el estilohorizontaly la propiedaddisplay: flexen el estiloheader.Cuando el tamaño del navegador es menor a 720px, el
display: noneen el estilohorizontaloculta el componenteMenuy todo se muestra como se espera. Sin embargo, cuando el tamaño del navegador vuelve a ser mayor a 720px, eldisplay: flexen el estiloheaderparece anular eldisplay: blockestablecido por el estilohorizontal, lo que hace que el componenteMenupermanezca oculto.El hecho de que el estilo funcione correctamente al reemplazar el componente
Menupor otro sugiere que el problema radica dentro del propio componenteMenu. Es posible que el componenteMenutambién establezca una propiedaddisplaypor su cuenta, o que tenga un modelo de caja diferente que esté causando conflictos con el estiloheader.Para resolver este problema, podría valer la pena intentar eliminar la propiedad
display: flexdel estiloheadero investigar la implementación subyacente del componenteMenupara ver si hace algo que pueda interferir con el estilohorizontal. Otra opción sería utilizar un método diferente para ocultar y mostrar el componenteMenusegún el tamaño de la pantalla, como la representación condicional en función de una variable de estado.