Как объединить два разных проекта без конфликта css (React CRA) - PullRequest
Новая
       4

Как объединить два разных проекта без конфликта css (React CRA)

0 голосов
/ 18 июня 2020

Я много искал слияние двух разных проектов, и я пробовал много способов объединить два разных проекта (панель управления и некоторые основные страницы) с помощью redux, поместив ./src из двух проектов рядом друг с другом и et c ...

, но во время всего процесса слияния произошло css конфликт, из-за которого мои элементы пользовательского интерфейса становятся беспорядочными это изображение страницы панели инструментов

и вот мой индекс. js коды 

import React from 'react';
import { BrowserRouter as Router, Route , Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import cx from 'classnames';
import { setMobileNavVisibility } from '../../reducers/Layout';
import { withRouter } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import SideBar from '../../components/SideBar';
import ThemeOptions from '../../components/ThemeOptions';
import MobileMenu from '../../components/MobileMenu';
/*
 * pages in the dashboard
 */
import Dashboard from '../Dashboard';
import Components from '../Components';
import Wallet from '../Wallet';
import UserProfile from '../UserProfile';
import Forms from '../Forms';
import Charts from '../Charts';
import Annoncements from '../Annoncements';
import Setting from '../Setting';
import Tables from '../Tables';
import Intern from '../Employer/Intern';
import Employer from '../Employer';
import TableWallet from '../Wallet/TableWallet';
import SavedAnnoncements from '../SavedAnnoncements';
import NotificationPage from './NotificationPage';
import Packages from '../Wallet';
import SubApp from '../../Showings/subApp';

const Main = ({
  mobileNavVisibility,
  hideMobileMenu,
  history
}) => {
  history.listen(() => {
    if (mobileNavVisibility === true) {
      hideMobileMenu();
    }
  });
  
  return (
    <React.Fragment>
      <div className={cx({'nav-open': mobileNavVisibility === true})}>
        <div className="wrapper">
          <div className="close-layer" onClick={hideMobileMenu}></div>
          <SideBar />
          <div className="main-panel">
            <Header />
              <Router>
                <Switch>
                  <Route exact path="/" component={Dashboard} />              
                  <Route path="/Wallet" component={Wallet} />
                  <Route path="/Annoncements" component={Annoncements} />
                  <Route path="/Setting" component={Setting} />
                  <Route path="/SavedAnnoncements" component={SavedAnnoncements} />
                  <Route path="/Intern" component={Intern} />
                  <Route path="/Employer" component={Employer} />
                  <Route path="/NotificationPage" component={NotificationPage} />
                  <Route exact path="/TableWallet" component={TableWallet} />
                </Switch>
              </Router>
            <Footer />
          </div>
        </div>
      </div>
      </React.Fragment>
  )
};

const mapStateToProp = state => ({
  mobileNavVisibility: state.Layout.mobileNavVisibility
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  hideMobileMenu: () => dispatch(setMobileNavVisibility(false))
});

export default withRouter(connect(mapStateToProp, mapDispatchToProps)(Main));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
...