React -在构建React应用程序后CSS样式混乱

Question

我见过很多与我类似的问题，也有多种解决方案，但没有一个对我有效。

我使用npx create-react-app prima-prova制作了一个React应用程序，如官方教程中所示。

在开发时，"npm start“运行得很好，但是当运行"npm run build && serve -s build/”时，样式(只有CSS)会变得一团糟。

在开发环境中

​

​

在生产中

​

​

据我所知，在使用Material UI库时，这个问题很常见，但由于我不使用它，所以它应该无关紧要。

"dependencies": {
    "@mikecousins/react-pdf": "^5.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "@tinymce/tinymce-react": "^3.5.0",
    "animated-scroll-to": "^2.0.5",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "pdf-viewer-reactjs": "^2.0.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-fileupload-progress": "^0.5.0",
    "react-google-login": "^5.1.1",
    "react-google-recaptcha": "^2.0.1",
    "react-iframe": "^1.8.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-select": "^3.1.0"
  }

这些是我的依赖项。

如果我不得不胡乱猜测，我会说是pdf-viewer-reactjs": "^2.0.2库把一切都搞砸了，但它是我发现的在我的WebPage中显示PDF的最好的库。有没有更好的方法来做这样的事情，或者是其他什么东西来打破一切？提前谢谢你

Answer 1

这可能有点傻，但是你有没有试着一个接一个地移除你的依赖项，看看哪一个会负责呢？

此外，我会确保检查哪些类名弄乱了，并找出为什么这些特定的类。因为它看起来像是你得到了部分样式。