Reactjs 导出材料ui主题包

我想创建一个新的npm包，在那里我可以导出所有@material ui/核心组件，但按我的方式主题。当前正在使用typescript和汇总，但失败。这是我的密码

索引

export { Button } from '@material-ui/core'; 

package.json

{
  "name": "@ripley-ui/core",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "module": "build/index.esm.js",
  "types": "build/index.d.ts",
  "files": [
    "build"
  ],
  "scripts": {
    "build": "rollup -c",
    "storybook": "start-storybook -p 6006",
    "storybook:export": "build-storybook",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@rollup/plugin-commonjs": "^13.0.0",
    "@rollup/plugin-node-resolve": "^8.1.0",
    "@storybook/react": "^5.3.19",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/react": "^10.4.5",
    "@types/jest": "^26.0.4",
    "@types/react": "^16.9.43",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "rollup": "^2.21.0",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-typescript2": "^0.27.1",
    "ts-jest": "^26.1.1",
    "typescript": "^3.9.6"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.0"
  }
}

rollup.config.js

import external from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  external: ["react", "@material-ui/core"],
  plugins: [
    external(),
    resolve(),
    typescript({
      rollupCommonJSResolveHack: true,
      clean: true
    }),
    commonjs(),
  ]
};

和tsconfig.json

{
  "compilerOptions": {
    "rootDir": "src",
    "declaration": true,
    "declarationDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "storybook-static",
    "src/**/*.stories.tsx",
    "src/**/*.test.tsx"
  ]
}

将按钮导入新应用程序时出现的错误是

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

救命啊

更新

我做了另一个测试，这次创建并导出了一个由我制作的新组件，但仍然得到了相同的无效钩子调用错误，代码如下

import React, { useState } from "react";

import { TestComponentProps } from "./TestComponent.types";


const TestComponent: React.FC<TestComponentProps> = ({ theme }) => {
  const [state, setState] = useState('prueba')
  return (
  <div
    data-testid="test-component"
    className={`test-component test-component-${theme}`}
  >
    <h2>{state}</h2>
  </div>
)};

export default TestComponent;

import React，{useState}来自“React”；
从“/TestComponent.types”导入{TestComponentProps}”；
const TestComponent:React.FC=（{theme}）=>{
const[state，setState]=useState（'prueba'）
返回(
{state}
)};
导出默认测试组件；

---

那么，可能是我的绑定器或编译器出现了问题？

在进一步调查之后，我发现这不是您的绑定器错误（也不是网页包、包裹或汇总）。要解决这个问题，您只需将构建发布到npm中，然后从那里（而不是本地）安装它，瞧，它就可以工作了。欢呼声

将

react

和

react dom

从

devDependencies

中排除，帮助我解决了这个错误

您应该再次检查，您的组件使用了哪些钩子，比如

makeStyles（）

？@Michael是的，所有材质ui组件都有这个钩子makeStyles（），但是，我不知道是怎么弄错的。你能给我看一下使用

makeStyles（）

的代码吗？@Michael这是makeStyles（）的文档，但是，我做了另一个测试，我在上面进行了更新，所以你可以看到我的哑组件尝试使用钩子，但仍然会产生同样的无效钩子调用错误。你知道为什么会这样吗？我们如何在本地开发它？这是一个好问题，我想知道答案：）