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

Question

我启用了 CSS modules within webpack.config在我的 React 应用程序中，这样我就可以在本地将 CSS 文件范围限定到各个组件。我也在尝试使用 PrimeReact 中的 TabView 组件.当我这样做时，不会应用 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

通过如下修改 webpack.config，我能够使用 CSS 模块并选择性地将全局作用域应用于 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',
                    }),
                  ],
                },
              },
            ],
          },