项目引入react-data-grid样式未加载求助（单独Demo正常）

在现有项目中引入react-data-grid组件时，样式无法正常渲染，但单独搭建的Demo中组件样式显示正常。已执行npm install --save-dev style-loader安装style-loader，问题仍未解决。

相关代码文件 #

GridView.js 文件 #

import React, { useEffect, useState } from "react";
import DataGrid from 'react-data-grid';
import 'react-data-grid/lib/styles.css';
const columns = [
    { key: 'id', name: 'ID' },
    { key: 'title', name: 'Title' }
];

const GridView = () => {

    const [countries, setCountries] = useState([]);

    const getCountries = async () => {
        try {
            const response = await fetch("https://jsonplaceholder.typicode.com/todos", {
                method: 'GET',
            }).then(res => res.json())
            setCountries(response);

        }
        catch (error) {
            console.log("error =" + error);
        }
    };
    useEffect(() => {
        getCountries();
    }, []
    );

    const rowKeyGetter = (row) => {
        console.log("DataGet: ", row);

        return row.id;
    }

    return <DataGrid columns={columns} rows={countries} rowKeyGetter={rowKeyGetter} />;

}

export default GridView;

App.js 文件 #

import React from "react";
import Grid from "./GridView";
import DataGraph from "./Graph";
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import DatePicker, { DateObject } from "react-multi-date-picker"
import { useState } from 'react'



const options = [
    { value: 'one', className: 'mh-dropdown-option' },
    { value: 'two', className: 'mh-dropdown-option' },
    { value: 'two', className: 'mh-dropdown-option' },
    { value: 'two', className: 'mh-dropdown-option' },
    { value: 'two', className: 'mh-dropdown-option' },
]

function App() {
    const [state, setState] = useState([
        {
            startDate: new Date(),
            endDate: null,
            key: 'selection'
        }
    ]);

    const [values, setValues] = useState([
        new DateObject().subtract(4, "days"),
        new DateObject().add(4, "days")
    ])




    return (
        <>
            <div className="App">
                <br></br>
                <DatePicker
                    value={values}
                    onChange={setValues}
                    range
                />
                <br></br>
                <div>
                    <Dropdown options={options} placeholder="User Activity: Who's Logged In" className='mh-select-container' controlClassName='mh-dropdown mh-dropdown-rounded' menuClassName='mh-dropdown-content' />
                </div>
                <br></br>
                <h2>My Chart</h2>
                <DataGraph />
                <br></br>
                <h2>My Grid</h2>
                <Grid />
                <br></br>
            </div>
        </>
    );
}

export default App;

webpack-dev.config.js 文件 #

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './Reactsrc/index.js',
    output: {
        filename: 'report.js',
        path: path.resolve(__dirname, 'Scripts'),
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env', '@babel/preset-react']
                  }
                },
                include: path.join(__dirname, 'Reactsrc')
            }
        ]
    }
};

样式未加载的显示效果 #

排查与解决步骤 #

1. 修正webpack对第三方CSS的处理范围
   当前webpack的CSS规则未明确覆盖node_modules目录，导致react-data-grid的CSS未被解析。修改webpack配置中的CSS规则，添加对node_modules的包含：

   {
       test: /\.css$/i,
       use: ["style-loader", "css-loader"],
       include: [path.join(__dirname, 'Reactsrc'), path.join(__dirname, 'node_modules')]
   }
   

2. 验证CSS导入路径
   部分新版本的react-data-grid样式路径已变更为react-data-grid/dist/styles.css，尝试修改导入语句：

   import 'react-data-grid/dist/styles.css';
   

3. 清理缓存并重构项目
   执行命令清理依赖缓存并重新构建：

   rm -rf node_modules package-lock.json
   npm install
   npm run build
   

4. 检查样式冲突
   通过浏览器开发者工具查看组件元素的样式规则，确认是否有项目全局CSS覆盖了react-data-grid的默认样式，针对性调整CSS优先级。

5. 适配CSS Modules场景（可选）
   如果项目使用CSS Modules，需对第三方CSS禁用modules机制，拆分webpack规则：

   {
       test: /\.css$/i,
       oneOf: [
           // 处理本地CSS Modules文件
           {
               test: /\.module\.css$/,
               use: [
                   "style-loader",
                   { loader: "css-loader", options: { modules: true } }
               ],
               include: path.join(__dirname, 'Reactsrc')
           },
           // 处理第三方库的普通CSS
           {
               use: ["style-loader", "css-loader"],
               include: path.join(__dirname, 'node_modules')
           }
       ]
   }
   

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