React组件中CSS失效求助：导入main.css后样式未完全生效

我在Main.js中导入了main.css文件，但CSS并未完全生效——尝试设置两个不同宽度的区块时，CSS代码对内部容器不起作用。

相关信息 #

• Main.js代码：导入main.css，渲染包含.container和.inner-container类的DOM结构
• main.css代码：定义.container宽度为80%，.inner-container宽度为50%，并添加边框样式
• 页面显示效果：外部.container样式正常生效，但内部.inner-container的宽度设置未生效，显示宽度与外部容器一致
• 项目结构：Main.js与main.css处于同一层级目录

排查与解决方法 #

1. 检查选择器匹配与样式优先级
   打开浏览器开发者工具（F12），选中内部容器元素，查看「样式」面板：

   • 确认.inner-container的CSS规则是否被加载
   • 若规则被划掉，说明存在更高优先级的样式（如内联样式、更具体的选择器、!important规则）覆盖了当前设置

2. 验证CSS导入路径与加载状态

   • 确认Main.js中的导入语句为import './main.css'（同层级目录正确路径）
   • 在开发者工具「网络」面板查看main.css是否成功加载，若返回404则路径存在拼写或层级错误

3. 排查CSS模块化影响
   如果项目启用了CSS Modules（常见于React、Vue等框架配置），类名会被编译为哈希值，直接使用.inner-container选择器无效。此时需修改导入与使用方式：

   // Main.js中修改导入
   import styles from './main.css'
   
   // JSX中使用类名
   <div className={styles.container}>
     <div className={styles.innerContainer}></div>
   </div>
   

   注：若CSS类名是短横线分隔，需用方括号语法styles['inner-container']

4. 检查CSS语法错误
   确认.inner-container的CSS规则无语法错误（如遗漏分号、括号，属性名拼写错误）。可临时添加background: red测试，若背景色生效则说明是宽度属性相关问题，否则是选择器或加载问题

5. 排查全局样式干扰
   检查是否存在全局样式重置规则（如* { width: 100% !important; }）强制覆盖子元素样式，这类规则会导致自定义宽度失效

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