Проблема с библиотекой пользовательского интерфейса и общим веб-интерфейсом при загрузке bootstrap css с локального диска - PullRequest
Новая
       7

Проблема с библиотекой пользовательского интерфейса и общим веб-интерфейсом при загрузке bootstrap css с локального диска

0 голосов
/ 21 января 2020

Я работаю над веб-приложением React и испытываю странное поведение, когда использую bootstrap таблицу стилей из ссылки maxcdn и когда я импортирую "то же самое" css с локального диска.

index . html при загрузке по ссылке maxcdn 

 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="Line Clearance">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.tsx выглядит следующим образом 

import React from 'react'; 
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import App from './components/App'
import { RootStore } from './store/RootStore';
import '../images/favicon.ico';
import './css/kendo-theme-material-all.css';
import './css/font-awesome.min.css';
import '../node_modules/react-checkbox-tree/lib/react-checkbox-tree.css';
import '../images/cxv-icon.png'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Route,  BrowserRouter as Router } from 'react-router-dom';


class InnerApp extends React.Component{
  componentDidMount(){
  }
  render(){ 
    return(
      <Provider rootStore = {new RootStore()}>
        <App/>
      </Provider>
    )
  }
}

ReactDOM.render(
  <Provider>
    <InnerApp/>
  </Provider>
  ,
  document.getElementById('root'));

Страница входа выглядит как - и это ожидается

enter image description here

Теперь, потому что веб-приложение не всегда имеет доступ к inte rnet и, следовательно, нет доступа на эту ссылку maxcdn он не загружается должным образом.

Я устал загружать bootstrap 3.3.7 или 4.0.0 и помещать их на диск, а затем импортировать их в файл index.tsx, но я не получаю ожидаемого поведения, как показано при входе в систему страница выше. Кроме того, все мои кнопки Material-UI, для которых, например, для свойства hidden установлено значение true, все еще отображаются на веб-странице.

index.tsx после изменения загрузки с диска 

import React from 'react'; 
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import App from './components/App'
import { RootStore } from './store/RootStore';
import '../images/favicon.ico';
import './css/kendo-theme-material-all.css';
import './css/font-awesome.min.css';
import '../node_modules/react-checkbox-tree/lib/react-checkbox-tree.css';
import '../images/cxv-icon.png'
import './css/bootstrap-3.3.7/dist/css/bootstrap.min.css';
import { Route,  BrowserRouter as Router } from 'react-router-dom';


class InnerApp extends React.Component{
  componentDidMount(){
  }
  render(){ 
    return(
      <Provider rootStore = {new RootStore()}>
        <App/>
      </Provider>
    )
  }
}

ReactDOM.render(
  <Provider>
    <InnerApp/>
  </Provider>
  ,
  document.getElementById('root'));

Я также удалил загрузку из ссылки maxcdn из индекса. html, но даже если я сохраню ее, она все равно не будет работать. Я тоже пробовал с bootstrap 4.0.0, но у меня такое же поведение.

Кто-нибудь может объяснить, почему я получаю это, и есть ли способ загрузить это css с диска в отличие от ссылки maxcdn?

Спасибо.

...