禁用JavaScript时的错误页无法应用媒体专属样式，该如何实现适配？

该需求完全可以实现。你当前使用的内联样式不支持媒体查询，只要把样式改为静态CSS编写即可，操作如下：

实现方案 #

因为错误页是在<noscript>标签内渲染，所以所有样式不能依赖JavaScript运行时加载，我们可以直接在组件内嵌入原生静态CSS，或者把样式写入全局CSS文件：

方案1：组件内嵌入静态CSS（兼容性最好，无需额外依赖）

修改后的ErrorPage组件代码如下：

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 (
        <>
            {/* 原生静态样式，JS禁用时也可正常生效 */}
            <style>
            {`
            /* 全局重置可选，避免默认边距影响布局 */
            body {
                margin: 0;
                padding: 0;
            }
            .error-container {
                width: 100%;
                min-height: 100vh; /* 默认占满整个视口高度，移动端生效 */
                background: #f5f5f5; /* 浅淡背景色，可自行调整色值 */
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
            .error-content {
                width: 100%;
            }
            .error-img {
                width: 100%;
            }
            .error-title {
                font-family: 'lato, sans-serif';
                color: #1074C3;
                margin: 12px 0 0 0;
            }
            /* 桌面端媒体查询，断点768px可根据你的业务需求调整 */
            @media (min-width: 768px) {
                .error-content {
                    height: 200px; /* 桌面端中间内容区高度200px */
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    background: #fff; /* 中间内容区和外围背景区分 */
                    padding: 0 24px;
                }
            }
            `}
            </style>
            <div className="error-container">
                <div className="error-content">
                    <img className="error-img" src="img.svg" alt="JavaScript required" />
                    <Typography component='h1' className="error-title">{requiredMsg}</Typography>
                    <p>{errorText}</p>
                </div>
            </div>
        </>
    )
}

export default ErrorPage

方案2：全局CSS写入

如果你的项目有全局引入的CSS文件，直接把上述<style>标签内的CSS代码复制到全局CSS文件中，组件内直接给对应元素加className即可，效果和方案1完全一致。

注意事项 #

请确保你的_document.js的<head>标签中已经配置了viewport元标签，否则移动端视口高度匹配会出现异常，标签示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

内容的提问来源于stack exchange，提问作者Kimaya