Wrapper Material-UI Components изменил имена классов на "jss"

Question

Я создаю библиотеку компонентов. Некоторые из этих компонентов являются только компонентами библиотеки Material-ui, инкапсулированной в новый компонент. Проблема заключается в том, что при импорте компонента apra в другой проект имена классов меняются, например, с «MuiAppBar-root» на «jss7».

Я пытался применить withStyles, а также themeProvider, но я получил тот же вывод. Я считаю, что проблема заключается в сборке библиотеки компонентов или в импорте компа в проекте, который использует create-реагировать-приложение, но я не хватает знаний о Babel и Webpack.

Структура папок и файлов:

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

webpack.config.js

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'
                }
            ]
        }
    };
};

AppBar.jsx:

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">

ожидаемый результат:

<header class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionRelative Simulacoes_navbar__2d50u">

Я бы хотел, чтобы при выводе непосредственно библиотеки материалов в пользовательский интерфейс в проект выводились одинаковые имена классов.