Next.js中SCSS主题逻辑仅在部分文件生效问题排查

• @import路径错误：检查_OutlinedInput.module.scss中引入_Theme.module.scss的相对路径是否正确。比如组件SCSS位于components/OutlinedInput目录，需确保导入路径为@import '../../styles/_Theme.module.scss';，路径错误会导致主题混合宏未加载，样式自然不生效。
• CSS Modules作用域隔离问题：CSS Modules默认会给类名添加哈希前缀，若根组件的theme_light类是带哈希的styles.theme_light，但子组件SCSS中的主题选择器仍用.theme_light（无哈希），会导致样式匹配失败。需在子组件SCSS中用:global(.theme_light)匹配全局类，或确保主题混合宏能正确继承父组件的带哈希类。
• SCSS资源导入遗漏/错误：确认_OutlinedInput.module.scss是否正确导入了_Theme.module.scss，注意文件名大小写（Next.js文件系统区分大小写），以及主题文件中的themed混合宏、t函数是否能被正常引用。
• 组件未被主题类正确包裹：检查OutlinedInput组件是否确实被Index.tsx中className={styles.theme_light}的div包裹。若组件通过ReactDOM.createPortal挂载到根组件外的DOM节点，主题类的父选择器将无法作用到该组件。
• CSS优先级冲突：用浏览器开发者工具查看OutlinedInput元素的样式计算结果，确认主题样式是否被组件自身更高优先级的默认样式覆盖。若主题样式被划掉，需调整选择器优先级（比如增加父类嵌套、使用!important作为临时排查手段）。

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