Update package.json, App.js, and yarn.lock: BUG: On Reload the search…

…box is big and blue#101. Create own name generator for css-classes to dodge conflicts in prerenderes versions. Otherwise we have totally unexspected behavior with our styling. stereobooster/react-snap#99

package.json

@@ -19,6 +19,7 @@
         "immutable": "^4.0.0-rc.12",
         "is-hotkey": "^0.1.6",
         "is-url": "^1.2.4",
+        "jss-preset-default": "^10.0.3",
         "lodash": "^4.17.15",
         "mdi-react": "^6.1.0",
         "prismjs": "^1.17.1",
@@ -31,6 +32,7 @@
         "react-draggable": "^4.0.3",
         "react-fontawesome": "^1.6.1",
         "react-ga": "^2.7.0",
+        "react-jss": "^10.0.3",
         "react-modal": "^3.10.1",
         "react-router-dom": "^5.1.2",
         "react-scripts": "3.2.0",

src/App.js

@@ -1,6 +1,9 @@
 // @ts-nocheck
 import React from 'reactn'
 import { BrowserRouter as Router, Route } from 'react-router-dom'
+import { JssProvider } from 'react-jss'
+import { create } from 'jss'
+import preset from 'jss-preset-default'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/styles'
 
@@ -153,4 +156,32 @@ class App extends React.Component {
     }
 }
 
-export default App
+// Create own name generator for css-classes to dodge conflicts in
+// prerenderes versions. Otherwise we have totally unexspected
+// behavior with our styling.
+// https://github.com/stereobooster/react-snap/issues/99
+
+const createGenerateClassName = () => {
+    let counter = 0
+    return (rule, sheet) =>
+        `c${Math.random()
+            .toString(36)
+            .substring(2, 4) +
+            Math.random()
+                .toString(36)
+                .substring(2, 4)}-${rule.key}-${counter++}`
+}
+
+const jss = create(preset())
+// Custom Material-UI class name generator for better debug and performance.
+jss.options.createGenerateClassName = createGenerateClassName
+
+function AppWidthCustomClassNames() {
+    return (
+        <JssProvider jss={jss}>
+            <App />
+        </JssProvider>
+    )
+}
+
+export default AppWidthCustomClassNames