Assign css class namespaces for projects to avoid colission

iftodimihail · Aug 8, 2024 · 030e12b · 030e12b
1 parent 8cfa0e5
commit 030e12b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/packages/container/src/App.js b/packages/container/src/App.js
@@ -1,15 +1,26 @@
+import React from "react";
 import { BrowserRouter } from "react-router-dom";
+import {
+  StylesProvider,
+  createGenerateClassName,
+} from "@material-ui/core/styles";
+
 import Header from "./components/Header";
 import MarketingApp from "./components/MarketingApp";
-import React from "react";
+
+const generateClassName = createGenerateClassName({
+  productionPrefix: "co",
+});
 
 export default () => {
   return (
     <BrowserRouter>
-      <div>
-        <Header />
-        <MarketingApp />
-      </div>
+      <StylesProvider generateClassName={generateClassName}>
+        <div>
+          <Header />
+          <MarketingApp />
+        </div>
+      </StylesProvider>
     </BrowserRouter>
   );
 };
diff --git a/packages/marketing/src/App.js b/packages/marketing/src/App.js
@@ -1,14 +1,21 @@
+import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
+import {
+  StylesProvider,
+  createGenerateClassName,
+} from "@material-ui/core/styles";
 
 import Landing from "./components/Landing";
 import Pricing from "./components/Pricing";
-import React from "react";
-import { StylesProvider } from "@material-ui/core/styles";
+
+const generateClassName = createGenerateClassName({
+  productionPrefix: "ma",
+});
 
 export default () => {
   return (
     <div>
-      <StylesProvider>
+      <StylesProvider generateClassName={generateClassName}>
         <BrowserRouter>
           <Switch>
             <Route exact path="/pricing" component={Pricing} />