Стили пользовательского интерфейса материала не работают в компоненте (предупреждение: несколько экземпляров `@ material-ui / styles`)

Question

Я создал автономный компонент React, который использует библиотеку Material UI (4.8.3), и опубликовал его в закрытом пакете NPM, чтобы его можно было использовать в ряде приложений.

Проект автономного компонента работает нормально (я использую Storybook для тестирования компонента), но когда я публикую sh, а затем импортирую компонент в новый проект React (созданный с помощью create-реагировать-приложение), я получите предупреждение:

It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.

Компонент отображается на странице, как показано ниже, но без применения каких-либо тем:

При щелчке по нему все темы в основном приложении React удаляются (обратите внимание, что синяя полоса на заднем плане позади меню потеряла свой цвет):

Я использую функциональность Material UI withStyles для создания темы моего компонента, что, по-моему, является проблемой, поскольку мое основное приложение React также использует это, но это рекомендуемый способ применения к стилю. Чувствуется ли мне, что мне нужно каким-то образом наследовать экземпляр темы от основного хоста App?

Мой проект компонента был создан с использованием create-реагировать-библиотеки и поэтому использует Rollup (0.64.1) и babel ( 6.26.3).

Вот компонент:

import React, {Component} from 'react'
import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
    root: {
        fontSize: '14px',
    }
})

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class MyComponent extends Component {

    render() {
        const { classes } = this.props

        return (
            <div className={classes.root}>Hello world</div>
        )
    }
}

export default withStyles(styles)(MyComponent)

, который публикуется в пакет NPM и затем импортируется в основное приложение с помощью:

import React, { Component } from 'react'
import { MyComponent } from '@xxx/mycomponent'

const styles = theme => ({
  root: {
    display: "flex",
    flexGrow: 1
  }
});

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Class
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class App extends Component {
  //

  // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  render() {
    //
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <MyComponent />
      </div>
    );
  }
}

export default withRouter(withStyles(styles)(App))