Question

我是React material-ui的新手。我使用了他们的指南，并创建了简单的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

他们的颜色不一样，字体也不一样。

我做错了什么？

Answer 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，但是对于那些想同时使用它们的人，如果您有解决方案，请分享：）

Material-ui无法正常工作

1 个答案: