材质 UI 响应式答案

【问题标题】：Material Ui responsive材质 UI 响应式
【发布时间】：2019-02-11 14:16:52
【问题描述】：

我正在使用 React js 和 Material ui 创建一个 Web 应用程序，但我没有在应用程序中获得响应。这是我的 head 标签中的代码：

<head>
    <meta charset="utf-8" />  

    <link href="https://fonts.googleapis.com/css?family=Righteous|Roboto"  rel="stylesheet">
    <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <title>React App</title>
</head>

【问题讨论】：

这段代码中的material-ui-css在哪里？
能否请您提及我缺少的行@Amir-Mousavi
您在响应方面遇到了什么问题？请显示行为不符合您预期的部分的代码，并描述当前行为与所需行为的比较。

标签： reactjs responsive-design material-ui

【解决方案1】：

如果您使用npm 安装material-ui，则无需在索引文件中硬编码任何脚本或CSS 链接。通过 npm 安装的模块将处理所有注入。

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

如果您坚持不使用 npm ，请在索引 head 标签中包含以下内容

<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

一个非常简单的code-sandbox 复制粘贴表单material-ui 示例表明它工作正常且完全响应，

在该示例中，您可以看到网格是响应式的，并且在减小页面大小时会堆叠起来。

【讨论】：

实际上我已经使用 npm 安装了 Material-UI，你能告诉我还有什么其他可能的原因
如果你能重新/产生你的问题，我一定可以看看。但是仅仅在这里看到索引文件就不清楚是什么原因