[docs] Add examples of global class names (#14563)

* Add global CSS examples

* good for me

Author: n-batalha

docs/src/pages/css-in-js/advanced/GlobalCss.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  '@global': {
+    '.cssjss-advanced-global-root': {
+      height: 100,
+      width: 100,
+      backgroundColor: 'blue',
+    },
+    '.cssjss-advanced-global-child': {
+      height: 8,
+      backgroundColor: 'red',
+    },
+  },
+});
+
+function GlobalCss() {
+  useStyles();
+
+  return (
+    <div className="cssjss-advanced-global-root">
+      <div className="cssjss-advanced-global-child" />
+    </div>
+  );
+}
+
+export default GlobalCss;

docs/src/pages/css-in-js/advanced/HybridGlobalCss.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: {
+    '&.root': {
+      height: 100,
+      width: 100,
+      backgroundColor: 'blue',
+    },
+    '& .child': {
+      height: 8,
+      backgroundColor: 'red',
+    },
+  },
+});
+
+function HybridCss() {
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.root, 'root')}>
+      <div className="child" />
+    </div>
+  );
+}
+
+export default HybridCss;

docs/src/pages/css-in-js/advanced/advanced.md

@@ -253,6 +253,20 @@ JSS relies on the concept of [class name generator](https://cssinjs.org/jss-api/
 
 ## Global CSS
 
+### `jss-plugin-global`
+
+The [`jss-plugin-global`](#jss-plugins) plugin is installed in the default preset, you can use it to define global class names.
+
+{{"demo": "pages/css-in-js/advanced/GlobalCss.js"}}
+
+### Hybrid
+
+You can also combine JSS generated class names with global ones.
+
+{{"demo": "pages/css-in-js/advanced/HybridGlobalCss.js"}}
+
+### Deterministic class names
+
 We provide an option to make the class names **deterministic** with the [`dangerouslyUseGlobalCSS`](/css-in-js/api/#creategenerateclassname-options-class-name-generator) option. When turned on, the class names will look like this:
 
 - development: `.AppBar-root`