Question

我正在使用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>

Answer 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例子，表明它可以正常工作并且响应迅速，

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

物质Ui响应

1 个答案: