包装材料-UI 组件将类名更改为“jss”

Question

我正在创建一个组件库。其中一些组件只是封装在新组件中的 Material-ui 库的组件。问题是，通过这种方式，当将组件导入另一个项目时，类名会发生变化，例如：“MuiAppBar-root”更改为“jss7”。

我尝试过应用 withStyles 和 themeProvider，但得到了相同的输出。我相信问题出在组件库的构建中或使用 create-react-app 的项目中的 comp 导入中，但我缺乏关于巴贝尔和网页包。

文件夹结构和文件：

/root
- /lib
- /material
- /node_modules
- /src
    - /components
     - /AppBar
        - AppBar.jsx
        - index.js
    ...
    -index.js
- ui    

webpack.config.js

/root
- /lib
- /material
- /node_modules
- /src
    - /components
     - /AppBar
        - AppBar.jsx
        - index.js
    ...
    -index.js
- ui    

AppBar.jsx：

const fs = require('fs');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const path = require('path');

const webpack = require('webpack');

const packageInfo = require('./package.json');

const outputPath = path.join(__dirname, 'ui');

const srcPath = path.join(__dirname, 'src');

const componentExternals = [];

const entryPoints = {
    index: './src/components/index.js'
};

const externals = [].concat(Object.keys(packageInfo.dependencies));

module.exports = (env, argv) => {
    const isDevelopment = argv.mode === 'development';

    return {
        entry: entryPoints,
        output: {
            path: outputPath,
            filename: 'index.js',
            publicPath: '/ui/',
            library: packageInfo.name,
            libraryTarget: 'umd' 
        },
        resolve: {
            modules: ['node_modules', path.resolve(__dirname, 'ui/index')],
            extensions: [
                '.scss',
                '.js',
                '.jsx',
                '.json',
                '.png',
                '.gif',
                '.jpg',
                '.svg'
            ]
        },
        externals,
        plugins: [
            new webpack.optimize.OccurrenceOrderPlugin(true),
            new MiniCssExtractPlugin({
                filename: isDevelopment ? '[name].css' : '[name].css'

            })
        ],
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/react']
                    },
                    include: srcPath
                },
                {
                    test: /\.module\.s(a|c)ss$/,
                    loader: [
                        isDevelopment
                            ? 'style-loader'
                            : MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                localIdentName:
                                    '[folder]_[local]__[hash:base64:5]',
                                camelCase: true,
                                sourceMap: isDevelopment
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: isDevelopment
                            }
                        }
                    ]
                },
                {
                    test: /\.s(a|c)ss$/,
                    exclude: /\.module.(s(a|c)ss)$/,
                    loader: [
                        isDevelopment
                            ? 'style-loader'
                            : MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: isDevelopment
                            }
                        }
                    ]
                },
                {
                    test: /\.svg$/,
                    loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
                }
            ]
        }
    };
};

输出：

import React, { Component } from 'react';
import { default as WAppBar } from '@material-ui/core/AppBar';

class AppBar extends Component {
    render() {
        return (
                <WAppBar {...this.props} />
        );
    }
}

export default AppBar;

预期输出：

<header class="jss11 jss17 jss2 jss1 jss7 jss9 Simulacoes_navbar__2d50u">

当将material-ui库直接导入到项目中时，我希望以相同的方式在输出中具有相同的类名。