Стили календаря не работают в React js

Question

<div data-provide="calendar"></div>

Когда я использую этот атрибут Html, календарь загружается, но у этого календаря нет стилей.Я не могу понять, почему эти стили не применяются к этому календарю.

Я использую этот календарь с помощью "bootstrap-year-calender".

Я также включил предоставленные файлы css и jsby "bootstrap-year-calender".

<link rel="stylesheet" type="text/css" href="/css2/bootstrap-year-calendar.css" />
<link rel="stylesheet" type="text/css" href="/css2/bootstrap-year-calendar.min.css" />
<script type="text/javascript" src="/js/bootstrap-year-calendar.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDiSo4yN97tS6CIfMqJCXItYCwgzVkIJVc&libraries=places"></script>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Пожалуйста, проверьте и предоставьте решение для меня.

Answer 1

Обновленный ответ

После просмотра вашего кода GitHub, я думаю, что нашел вашу проблему.Фактически вы используете CDN Bootstrap для включения кода Bootstrap css и js, но вы используете Bootstrap v4, когда « для плагина требуется Bootstrap v3.0.0 или более поздняя версия » .Это немного ошибочно, потому что технически v4 "позже, чем v3.0.0"

Тем не менее, нижняя строка означает, что вы должны использовать Bootstrap v3 .

Для этого вам необходимо изменить ссылки на CDN в статическом файле.

Вместо этого используйте следующее (взято с Страница загрузки Bootstrap v3.4.1 :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Я сделал это с предоставленным вами репозиторием и запустил его на моей локальной машине: он показывает: