Material-ui 未按预期工作答案

【问题标题】：Material-ui is not working as intendedMaterial-ui 未按预期工作
【发布时间】：2018-07-18 12:33:04
【问题描述】：

我是 React material-ui 的新手。我使用了他们的指南并创建了简单的 Appbar（与他们的相同）。但是，我的 appbar 看起来与他们的不同：

我的应用栏：

它应该看起来像这样：

我已经安装了npm install @material-ui/core
我在 index.html 的头部添加了 Roboto 字体。Here is a screenshot of my index.html

我的代码和他们的代码完全一样，只是改变了函数名。但是，此 AppBar 位于以下：

<div> // it is the root div
                    <Header2/> // the appbar

颜色不一样，字体也不一样。

我做错了什么？

【问题讨论】：

你能上传你作品的简短回购吗？我想看看，也许能帮上忙
永远不要将 React-bootstrap 和 material-ui 混合在一起......我即将上传我的源文件。我注意到了这一点：material-ui 链接下方有引导 CDN 链接。不知何故，他们没有一起工作
material-ui 有很棒的网格系统，你说得对，但是什么样的冲突导致无法工作？
我不知道，我在控制台中没有错误或警告。我猜它只是以某种方式发生冲突，这会禁用material-ui。

标签： reactjs material-ui

【解决方案1】：

事实证明，我不应该同时使用 react material-ui 和 react-bootstrap：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />


<!--
  manifest.json provides metadata used when your web app is added to the
  homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>React App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

我打算用react-material-ui，但是想同时用的，如果有解决办法，请分享一下：）

【讨论】：