使用自定义组件创建包答案

【问题标题】：Creating package with customized component使用自定义组件创建包
【发布时间】：2020-07-19 07:35:44
【问题描述】：

我想创建一个 Material UI 组件并将其作为单个组件提供在我公司的 npm 私有存储库中。

我自定义了日期选择器（我创建了日期范围选择器，Materials UI 不支持，感谢that），它有一些自定义类样式。当我在项目中导入/导出组件时，它会从我的主题中获取值，但是当我从 npm 包中导入捆绑的组件时，我认为导入的组件使用了他的内部样式。

代码：https://codesandbox.io/s/nice-mendel-2b1em

现在，问题

在这些情况下，如何使用提供全局（项目）主题创建可重用组件？我没有在 MUI Docs 中找到“好的做法”。

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

我觉得我应该回应这个问题。

我在我的 webpack 文件中添加了外部组件。

例如：

...
  externals: [
    {
      react: {
        root: "React",
        commonjs2: "react",
        commonjs: "react",
        amd: "react",
      },
      "react-dom": {
        root: "ReactDOM",
        commonjs2: "react-dom",
        commonjs: "react-dom",
        amd: "react-dom",
      },
    },
    "lodash",
    "@material-ui/core",
    /@material-ui\/core\/*./,
    "@material-ui/pickers",
    /@material-ui\/pickers\/*./,
    "@material-ui/styles",
    /@material-ui\/styles\/*./,
  ],
...

它从我的包包中排除库，并且安装后的包开始使用项目中的库并且主题开始工作正常！

【讨论】：