I have a website and I want to add a custom error page when javascript is disabled. I added a component inside inside _document.js
<body>
<noscript>
<ErrorPage />
</noscript>
</body>
Then that page is defined like this
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 ErrorPage
It looks good, but I need to add some media specific styling and elements to the page. Like it needs to take up entire space in mobile, while in desktop, it should just occupy the middle 200 px height, and rest should have a faded background. How is that possible? Can this be achieved?
I was able to achieve this by placing the styles within inside _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>