Tengo un sitio web y quiero agregar una página de error personalizada cuando javascript está deshabilitado. Agregué un componente dentro de _document.js
<body> <noscript> <ErrorPage /> </noscript> </body>Entonces esa página se define así.
function ErrorPage() { const requiredMsg = 'Javascript Required' const errorText = 'We're sorry, but the page does not work without JavaScript enabled. Please enable JavaScript on your browser.' return ( <div style={{ width: '100%', textAlign: 'center' }} > <img style={{ width: '100%' }} src={ 'img.svg' } /> <Typography component='h1' style={{ fontFamily: 'lato, sans-serif', color: '#1074C3' }}>{requiredMsg}</Typography> </div> ) } export default ErrorPageSe ve bien, pero necesito agregar algunos estilos y elementos específicos de medios a la página. Al igual que necesita ocupar todo el espacio en el móvil, mientras que en el escritorio, solo debe ocupar la altura media de 200 px, y el resto debe tener un fondo difuminado. ¿Cómo es eso posible? ¿Se puede lograr esto?
Pude lograr esto colocando los estilos dentro de _document
<Html> <noscript> <style>{` div.errorPage { background-color: rgba(0,0,0,0.3); } /* This is mobile */ @media (max-width:600px) { div.errorPage { background-color: none; width: 100%; text-align: center; height: auto; } } `}</style> </noscript>