Стайлинг в реакции не виден?

Question

Я работаю над сторонним компонентом нумерации страниц в Reactjs.и пакет npm говорит, что в файл должна быть включена строка import "rc-pagination / assets / index.css"; .

Но стиль не применяется.Загрузчик стилей вставляет index.css в DOM, но при проверке элемента я не вижу модульные classNames в тегах HTML.

Вот мой конфиг веб-пакета: (яЯ использую create-реагировать-приложение v2)

const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
        isEnvDevelopment && require.resolve("style-loader"),
        isEnvProduction && {
            loader: MiniCssExtractPlugin.loader,
            options: Object.assign(
                {},
                shouldUseRelativeAssetPaths ? { publicPath: "../../" } : undefined
            ),
        },
        {
            loader: require.resolve("css-loader"),
            options:{
                importLoaders: 1,
                modules: true,
                localIdentName: "[name]__[local]__[hash:base64:5]"
            },
        },
        {
            // Options for PostCSS as we reference these options twice
            // Adds vendor prefixing based on your specified browser support in
            // package.json
            loader: require.resolve("postcss-loader"),
            options: {
                // Necessary for external CSS imports to work
                // https://github.com/facebook/create-react-app/issues/2677
                ident: "postcss",
                plugins: () => [
                    require("postcss-flexbugs-fixes"),
                    require("postcss-preset-env")({
                        autoprefixer: {
                            flexbox: "no-2009",
                        },
                        stage: 3,
                    }),
                ],
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        },
        {
            loader: "sass-loader",
            options: {
                implementation: require("node-sass")
            }
        },
    ].filter(Boolean);
    if (preProcessor) {
        loaders.push({
            loader: require.resolve(preProcessor),
            options: {
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
        });
    }
    return loaders;
};

[примечание: это только из create-реагировать-приложение]

    {
                        test: cssRegex,
                        exclude: cssModuleRegex,
                        use: getStyleLoaders({
                            importLoaders: 1,
                            sourceMap: isEnvProduction && shouldUseSourceMap,
                        }),


                    {
                        test: cssModuleRegex,
                        use: getStyleLoaders({
                            importLoaders: 1,
                            sourceMap: isEnvProduction && shouldUseSourceMap,
                            modules: true,
                            getLocalIdent: getCSSModuleLocalIdent,
                        }),
                    },

import React ,{ Component } from "react";
import Pagination from "rc-pagination";
import "rc-pagination/assets/index.css";

class WebsiteFooter extends Component {
    state = {
    	current: 3,
    };
      onChange = (page) => {
      	console.log(page);
      	this.setState({
      		current: page,
      	});
      }
      render() {
      	return (
      		<div>
                  sxscs
      			<Pagination
      				onChange={this.onChange}
      				current={this.state.current}
      				total={80}
      				showLessItems
      				showTitle={false}
      			/>
      		</div>
      	);
      }
}

export default WebsiteFooter;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

и вот как выглядит мой DOM:

Пожалуйста, помогите мне!Я все погуглил, но ничего не могу найти.

Answer 1

В файле веб-пакета попытайтесь изменить объект загрузчика css на:

       {
        loader: require.resolve("css-loader"),
        options:{
            importLoaders: 1,
            modules: true,
            localIdentName: "[local]"
        }

Answer 2

После просмотра вашего кода выглядит, как будто у вас есть компонент Pagination, где вы должны были применить CSS-классы, определенные в index.css, поэтому вы должны импортировать ваш index.css в компоненте pagination, а не в компоненте WebsiteFooter.

Я надеюсь, что это решит вашу проблему!