randomize production classnames

Author: AlHamid-dev

packages/container/src/App.js

@@ -2,14 +2,21 @@ import React from "react"
 import MarketingApp from "./components/MarketingApp"
 import Header from "./components/Header"
 import { BrowserRouter } from "react-router-dom"
+import { StylesProvider, createGenerateClassName } from "@material-ui/core/styles"
+
+const generateClassName = createGenerateClassName({
+    productionPrefix: "co"
+})
 
 const App = () => {
     return (
         <BrowserRouter>
-            <div>
-                <Header />
-                <MarketingApp />
-            </div>
+            <StylesProvider generateClassName={generateClassName}>
+                <div>
+                    <Header />
+                    <MarketingApp />
+                </div>
+            </StylesProvider>
         </BrowserRouter>
     )
 }

packages/marketing/src/App.js

@@ -1,13 +1,17 @@
 import React from 'react'
-import { StylesProvider } from '@material-ui/core/styles'
+import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles'
 import { Switch, Route, BrowserRouter } from 'react-router-dom'
 import Pricing from './components/Pricing'
 import Landing from './components/Landing'
 
+const generateClassName = createGenerateClassName({
+    productionPrefix: "ma"
+})
+
 const App = () => {
     return (
         <div>
-            <StylesProvider>
+            <StylesProvider generateClassName={generateClassName}>
                 <BrowserRouter>
                     <Switch>
                         <Route exact path="/pricing" component={Pricing} />