在 React 应用程序中使用启用 CSS 模块的 PrimeReact 主题

Question

我启用了CSS modules within webpack.config in my React application so that I can locally scope CSS files to individual components. I'm also trying to use the TabView component from PrimeReact。当我这样做时，不会应用 PrimeReact 的主题。如果我创建一个单独的项目并且不启用 CSS 模块，主题将正确应用。

如何使用 PrimeReact 主题并启用 CSS 模块？

我测试过将 Tabs.js 中的内容直接移动到 App.js 中并得到相同的结果。

CSS 模块已启用

Webpack.config

require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash_base64:5]'
            },
          },

App.js

import React, { Component } from 'react';
import classes from './App.css';
import Tabs from './UI/Tabs';

class App extends Component {
  render() {
    return (
        <Tabs/>
    );
  }
}

export default App;

Tabs.js

import React from 'react';
import {TabView, TabPanel} from 'primereact/components/tabview/TabView';
import classes from 'primereact/resources/primereact.css';
import theme from 'primereact/resources/themes/cupertino/theme.css';

const Tabs = () => (
        <TabView>
        <TabPanel header="Tab One">
          This is content for Tab One.
          </TabPanel>
           <TabPanel header="Tab Two">
          This is content for Tab Two.
          </TabPanel>
        </TabView>
);

export default Tabs;

默认 React 全局 CSS 作用域

CSS 模块已启用（本地组件范围）

Answer 1

我能够使用 CSS 模块，并通过如下修改 webpack.config 有选择地将全局范围应用于 PrimeReact 的主题。

原:

{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },

修改:

 {
            test: /\.css$/,
            //Exclude 3rd party css that needs to be scoped globally from using
            //css-loader with modules enabled
            exclude: [
              path.resolve('node_modules/primereact/resources/primereact.css'),
              path.resolve('node_modules/primereact/resources/themes/cupertino/theme.css'),
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash_base64:5]'
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },
          //Additional css-loader configuration
          {
            test: /\.css$/,
            //Inlcude only 3rd party css that needs to be scoped globally to use
            //css-loader with modules disabled
            include: [
              path.resolve('node_modules/primereact/resources/primereact.css'),
              path.resolve('node_modules/primereact/resources/themes/cupertino/theme.css'),
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },

Answer 2

使用以下两个 npm 命令安装 CSS 和样式加载器：

npm install style-loader - 如果需要，您可以添加加载的版本 npm 安装 css-loader

您不需要更改任何其他内容。

在 React 应用程序中使用启用 CSS 模块的 PrimeReact 主题

Use PrimeReact Themes with CSS Modules Enabled in React Application

css

reactjs

themes

react-css-modules

primereact