Адаптивный интерфейс материала
Я работаю над созданием веб-приложения, используя реагирующий js и материальный пользовательский интерфейс, но я не получаю отзывчивость в приложении. Это код в моем теге 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>
не могли бы вы упомянуть строку, которую мне не хватает @Amir-Mousavi
Что у вас за проблемы с реакцией? Пожалуйста, покажите код части, которая ведет себя не так, как вы ожидаете, и опишите, как текущее поведение сравнивается с желаемым поведением.
Ответы 1
Если вы используете npm для установки пользовательского интерфейса материала, нет необходимости жестко кодировать какие-либо скрипты или ссылки 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">
очень простой код-песочница, который копирует и вставляет примеры материала формы, показывает, что он работает правильно и полностью отзывчив,
в этом примере вы можете видеть, что сетки реагируют и складываются при уменьшении размера страницы.
На самом деле я установил material-UI с помощью npm, можете ли вы сказать, что может быть другой возможной причиной этого?
если вы можете воспроизвести свою проблему, конечно, я могу взглянуть. но, просто увидев здесь индексный файл, ничего не понятно, в чем может быть причина
и где в этом коде material-ui-css?