material-ui和react在` `npm run build`后没有重现相同的行为？

Question

我正在创建一个内容库，在那里我使用create-react-app的react-app。package.json看起来像这样

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^1.4.1",
    "@material-ui/icons": "^2.0.1",
    "firebase": "^5.3.0",
    "md5": "^2.2.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-flexbox-grid": "^2.1.2",
    "react-katex": "^2.0.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

运行yarn install && yarn start时，应用程序运行正常，请参见下面的快照

而当我运行yarn build && serve -s build或npm run build && serve -s build时，应用程序看起来不一样，UX也搞砸了，请看下面的内容

链接了https://pastebin.com/dDHnvRWA的yarn.lock文件

预期行为

yarn start上的页面和运行npm run build && serve -s build后的页面应该完全相同

当前行为

在npm run build && serve -s build之后出现的页面是不同的(请参阅附加的快照)

您的环境

| Tech         | Version |
|--------------|---------|
| Material-UI/core  | ^1.4.1 |
| Material-UI/icons | ^2.0.1|  
| React        |    ^16.4.1     |
| Browser      |   Google Chrome Version 68.0.3440.106 (Official Build) (64-bit)      |
| TypeScript   |      None   |
| etc.         |         |

​

​

Answer 1

由于材料反应组件是从不正确的路径导入的，因此创建了问题

不正确的路径(导致问题)

import {AppBar, Toolbar, Typography} from
    "@material-ui/core/umd/material-ui.production.min";

正确路径

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography"; 

从正确路径导入后，应用程序开始按预期运行