How to Merging two different project without css conflict

[mzrLab]

I've been searching a lot about merging two different project and I've tried lots of ways to merge two different project(dashboard and some main pages) with redux , putting ./src's of two project beside each other and etc ...

but the thing happened in all the process of merging is css conflict which my ui elements gets messy

this is my index.js of dashboard

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';
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';

/*
import Home from '../../componentss/Homepage.js';
import SignIn from '../../componentss/SignInForm.js';
import MainPage from '../../componentss/MainPage.js';
import About from '../../componentss/About.js';
import InnerIntern from '../../componentss/InnerPageIntern.js';
import InnerEmp from '../../componentss/InnerPagesEmployer.js';
import FiltersIntern from '../../componentss/MoreFiltersInterns.js';
import Annoncement from '../../componentss/Annoncement.js';
import SuccessfullPage from '../../componentss/SuccessfulPage.js';
import Welcome from '../../componentss/Welcoming.js';
import NotFound from '../../componentss/FourOFour.js';
import Help from '../../componentss/Help.js';
*/
//import Help from '../Help/Help.js';
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));

[ianschmitz]

It's a tough question to answer generically. The answer could vary depending on the specifics of your project. Not sure you're gonna get much guidance on this unfortunately ☹️

[mzrLab]

I tried the json output manupluating from webpack , and merging two projects with putting src's together but no result

[DarnerDiaz]

Solution: Use CSS Modules or CSS-in-JS to Avoid Conflicts

Great question! CSS conflicts when merging two CRA projects is a common issue. Here are the best solutions:

Option 1: CSS Modules (Recommended for CRA)

Create React App has built-in CSS Modules support—no extra setup needed!

// Dashboard.module.css
.navOpen { padding: 20px; }
.wrapper { max-width: 1200px; }

// Dashboard.jsx
import styles from "./Dashboard.module.css";

export function Dashboard() {
  return (
    <div className={styles.navOpen}>
      <div className={styles.wrapper}>Content</div>
    </div>
  );
}

Why this works: CSS is scoped to the component. Zero global conflicts!

Option 2: CSS Namespacing with BEM Convention

Add prefixes to prevent cascade conflicts:

.dashboard__nav-open { padding: 20px; }
.features__nav-open { padding: 20px; }

Option 3: CSS-in-JS

Libraries like styled-components eliminate CSS naming issues entirely.

✅ Recommended Path

1. Use CSS Modules for new components (built-in, zero-config)
2. Add BEM prefixes to existing CSS as temporary fix
3. Migrate gradually to styled-components if needed

CSS Modules solves 95% of merge conflicts—highly recommended!

See: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/