React组件导入CSS未生效问题（Symfony+Encore环境）

可能的原因及排查方案 #

1. 检查Encore的CSS配置是否正确 #

确保webpack.config.js里已正确配置CSS处理逻辑，尤其是是否误开启了CSS Modules：

// webpack.config.js
Encore
    // ...其他基础配置
    .enableReactPreset()
    // 确保CSS处理未启用模块化（若未使用CSS Modules）
    .configureCssLoader(options => {
        options.modules = false;
    })
;

如果开启了CSS Modules，类名会被哈希化，此时需要改用以下方式导入和使用样式：

import styles from "./styles.css";
// 组件中使用className={styles['grey-thead']}

2. 验证文件路径是否正确 #

确认styles.css与React组件文件处于同一目录，若路径不符需调整导入语句（比如../styles.css）。可通过查看编译后的public/build目录，确认CSS文件是否被正确打包。

3. 排查样式优先级冲突 #

在浏览器开发者工具中查看目标元素的样式面板，检查.grey-thead规则是否被其他高优先级样式覆盖（被划掉的样式即为被覆盖）。若存在冲突，可提升选择器权重：

thead tr.grey-thead {
    background-color: grey;
}

尽量避免使用!important，优先通过调整选择器层级解决冲突

4. 清理缓存并重新编译 #

Encore的缓存可能导致样式未更新，执行以下命令重新构建资源：

# 清理缓存与旧构建文件
rm -rf var/cache/* public/build/*

# 开发环境重新编译
yarn encore dev
# 生产环境编译
yarn encore production

5. 确认组件渲染的类名正确性 #

在浏览器Elements面板中检查<tr>元素的类名是否为grey-thead，排除拼写错误、大小写不一致等问题。

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