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

Posted 2023-02-21

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

【英文标题】：Use PrimeReact Themes with CSS Modules Enabled in React Application

【发布时间】：2018-06-09 04:33:50

【问题描述】：

我在我的 React 应用程序中启用了CSS modules within webpack.config，这样我就可以将 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 模块（本地组件范围）

【参考方案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',
                    ),
                  ],
                ,
              ,
            ],
          ,

【讨论】：

你找到在运行时交换主题的方法了吗？

【参考方案2】：

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

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

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