Danilo-Araujo-Silva · July 26, 2023 09:28 · Mar 3, 2019 · Mar 3, 2019 · Mar 3, 2019 · Mar 3, 2019
diff --git a/Overriding Material UI styles with Styled Components.md b/Overriding Material UI styles with Styled Components.md
@@ -48,9 +48,13 @@ For example, to override the AppBar (https://material-ui-next.com/api/app-bar/)
 
 # Fourth method (use a custom classname generator)
 
+You can control the classenames that will be generated by MaterialUI.
+Maybe it will require a little more effort but it can also bring more flexibility.
+
 Please see these sections of the documentation: 
- - https://material-ui.com/customization/css-in-js/#css-injection-order
  - https://material-ui.com/customization/css-in-js/#global-css
+ - https://material-ui.com/customization/css-in-js/#creategenerateclassname-options-class-name-generator
+ - https://material-ui.com/customization/css-in-js/#css-injection-order
 
 `/path/to/the/theme/provider/ThemeProvider.js`:
 ```js

diff --git a/Overriding Material UI styles with Styled Components.md b/Overriding Material UI styles with Styled Components.md
@@ -52,6 +52,7 @@ Please see these sections of the documentation:
  - https://material-ui.com/customization/css-in-js/#css-injection-order
  - https://material-ui.com/customization/css-in-js/#global-css
 
+`/path/to/the/theme/provider/ThemeProvider.js`:
 ```js
 import React from "react"
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
@@ -70,7 +71,7 @@ const ClassNameGenerator = (p) =>
     {p.children}
   </JssProvider>
 
-export class MyComponent {
+export class ThemeProvider {
 
   render() {
     return (
@@ -82,4 +83,27 @@ export class MyComponent {
     )
   }
 }
+```
+
+`/path/to/the/root/component/Root.js`
+```js
+import React from "react"
+import {Provider} from "react-redux"
+
+import {ThemeProvider} from "/path/to/the/theme/provider/ThemeProvider"
+import {Router} from "/path/to/your/router/definitions/Router"
+import {reduxStore} from "/path/to/your/redux/store"
+
+export class Root {
+
+  render() {
+    return (
+      <Provider store={reduxStore}>
+        <ThemeProvider>
+          <Router />
+        </ThemeProvider>
+      </Provider>
+    )
+  }
+}
 ```
diff --git a/Overriding Material UI styles with Styled Components.md b/Overriding Material UI styles with Styled Components.md
@@ -61,25 +61,25 @@ import JssProvider from "react-jss/lib/JssProvider"
 import {yourTheme} from "/path/to/your/theme"
 
 const generateClassName = createGenerateClassName({
-	dangerouslyUseGlobalCSS: true,
-	productionPrefix: 'mui',
+  dangerouslyUseGlobalCSS: true,
+  productionPrefix: 'mui',
 })
 
 const ClassNameGenerator = (p) =>
-	<JssProvider generateClassName={generateClassName} {...p}>
-		{p.children}
-	</JssProvider>
+  <JssProvider generateClassName={generateClassName} {...p}>
+    {p.children}
+  </JssProvider>
 
 export class MyComponent {
 
-	render() {
-		return (
-			<ClassNameGenerator>
-				<MuiThemeProvider theme={yourTheme}>
-					{this.props.children}
-				</MuiThemeProvider>
-			</ClassNameGenerator>
-		)
-	}
+  render() {
+    return (
+      <ClassNameGenerator>
+        <MuiThemeProvider theme={yourTheme}>
+          {this.props.children}
+        </MuiThemeProvider>
+      </ClassNameGenerator>
+    )
+  }
 }
 ```
diff --git a/Overriding Material UI styles with Styled Components.md b/Overriding Material UI styles with Styled Components.md
@@ -44,4 +44,42 @@ For example, to override the AppBar (https://material-ui-next.com/api/app-bar/)
         z-index: 1500;
       }
     `
+```
+
+# Fourth method (use a custom classname generator)
+
+Please see these sections of the documentation: 
+ - https://material-ui.com/customization/css-in-js/#css-injection-order
+ - https://material-ui.com/customization/css-in-js/#global-css
+
+```js
+import React from "react"
+import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
+import {createGenerateClassName} from "material-ui/styles"
+import JssProvider from "react-jss/lib/JssProvider"
+
+import {yourTheme} from "/path/to/your/theme"
+
+const generateClassName = createGenerateClassName({
+	dangerouslyUseGlobalCSS: true,
+	productionPrefix: 'mui',
+})
+
+const ClassNameGenerator = (p) =>
+	<JssProvider generateClassName={generateClassName} {...p}>
+		{p.children}
+	</JssProvider>
+
+export class MyComponent {
+
+	render() {
+		return (
+			<ClassNameGenerator>
+				<MuiThemeProvider theme={yourTheme}>
+					{this.props.children}
+				</MuiThemeProvider>
+			</ClassNameGenerator>
+		)
+	}
+}
 ```
diff --git a/...Material UI styles with Styled Components → ...erial UI styles with Styled Components.md b/...Material UI styles with Styled Components → ...erial UI styles with Styled Components.md
diff --git a/Overriding Material UI styles with Styled Components b/Overriding Material UI styles with Styled Components
@@ -1,28 +1,47 @@
 For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:
 
-First method (override Material UI classnames):
+# First method (override Material UI classnames):
+
 1 - Add the property classes in the AppBar component:
+
+```js
     <AppBar classes={{root: 'my-root-class'}}
+```
+
 2 - Override the styles with the styled components:
+
+```js
     styled(AppBar)`
       &.my-root-class {
         z-index: 1500;
       }
     `
+```
+
+# Second method (force specificity):
 
-Second method (force specificity):
+```js
     styled(AppBar)`
       && {
         z-index: 1500;
       }
     `
+```
+
+# Third method (use a custom classname):
 
-Third method (use a custom classname): 
 1 - Add the classname in the classname property:
+
+```js
     <AppBar className={`my-class ${this.props.otherClassesFromPropertiesIfNeeded}`}
+```
+
 2 - Override the styles with the styled components:
+
+```js
     styled(AppBar)`
       &.my-class {
         z-index: 1500;
       }
-    `
+    `
+```
diff --git a/Overriding Material UI styles with Styled Components b/Overriding Material UI styles with Styled Components
@@ -19,7 +19,7 @@ Second method (force specificity):
 
 Third method (use a custom classname): 
 1 - Add the classname in the classname property:
-    <AppBar className={`my-class ${this.props.otherClassesFromPropertiesWithNeeded}`}
+    <AppBar className={`my-class ${this.props.otherClassesFromPropertiesIfNeeded}`}
 2 - Override the styles with the styled components:
     styled(AppBar)`
       &.my-class {

diff --git a/Overriding Material UI styles with Styled Components b/Overriding Material UI styles with Styled Components
@@ -19,7 +19,7 @@ Second method (force specificity):
 
 Third method (use a custom classname): 
 1 - Add the classname in the classname property:
-    <AppBar className={`my-class ${this.props.className}`}
+    <AppBar className={`my-class ${this.props.otherClassesFromPropertiesWithNeeded}`}
 2 - Override the styles with the styled components:
     styled(AppBar)`
       &.my-class {

diff --git a/Overriding Material UI styles with Styled Components b/Overriding Material UI styles with Styled Components
@@ -1,7 +1,6 @@
 For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:
 
 First method (override Material UI classnames):
-
 1 - Add the property classes in the AppBar component:
     <AppBar classes={{root: 'my-root-class'}}
 2 - Override the styles with the styled components:
@@ -12,7 +11,6 @@ First method (override Material UI classnames):
     `
 
 Second method (force specificity):
-
     styled(AppBar)`
       && {
         z-index: 1500;

diff --git a/Overriding Material UI styles with Styled Components b/Overriding Material UI styles with Styled Components
@@ -3,28 +3,28 @@ For example, to override the AppBar (https://material-ui-next.com/api/app-bar/)
 First method (override Material UI classnames):
 
 1 - Add the property classes in the AppBar component:
-<AppBar classes={{root: 'my-root-class'}}
+    <AppBar classes={{root: 'my-root-class'}}
 2 - Override the styles with the styled components:
-styled(AppBar)`
-	&.my-root-class {
-		z-index: 1500;
-	}
-`
+    styled(AppBar)`
+      &.my-root-class {
+        z-index: 1500;
+      }
+    `
 
 Second method (force specificity):
 
-styled(AppBar)`
-	&& {
-		z-index: 1500;
-	}
-`
+    styled(AppBar)`
+      && {
+        z-index: 1500;
+      }
+    `
 
 Third method (use a custom classname): 
 1 - Add the classname in the classname property:
-<AppBar className={`my-class ${this.props.className}`}
+    <AppBar className={`my-class ${this.props.className}`}
 2 - Override the styles with the styled components:
-styled(AppBar)`
-	&.my-class {
-		z-index: 1500;
-	}
-`
+    styled(AppBar)`
+      &.my-class {
+        z-index: 1500;
+      }
+    `
diff --git a/Overriding Material UI styles with Styled Components b/Overriding Material UI styles with Styled Components
@@ -1 +1,30 @@
-For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root
+For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root class we can do the following:
+
+First method (override Material UI classnames):
+
+1 - Add the property classes in the AppBar component:
+<AppBar classes={{root: 'my-root-class'}}
+2 - Override the styles with the styled components:
+styled(AppBar)`
+	&.my-root-class {
+		z-index: 1500;
+	}
+`
+
+Second method (force specificity):
+
+styled(AppBar)`
+	&& {
+		z-index: 1500;
+	}
+`
+
+Third method (use a custom classname): 
+1 - Add the classname in the classname property:
+<AppBar className={`my-class ${this.props.className}`}
+2 - Override the styles with the styled components:
+styled(AppBar)`
+	&.my-class {
+		z-index: 1500;
+	}
+`
diff --git a/Overriding Material UI styles with Styled Components b/Overriding Material UI styles with Styled Components
@@ -0,0 +1 @@
+For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		For example, to override the AppBar (https://material-ui-next.com/api/app-bar/) root