Document how to set global styles for user components - closes styleg…

…uidist#701

docs/Cookbook.md

@@ -7,6 +7,7 @@
 - [How to use `ref`s in examples?](#how-to-use-refs-in-examples)
 - [How to exclude some components from style guide?](#how-to-exclude-some-components-from-style-guide)
 - [How to hide some components in style guide but make them available in examples?](#how-to-hide-some-components-in-style-guide-but-make-them-available-in-examples)
+- [How to set global styles for user components](#how-to-set-global-styles-for-user-components)
 - [How to add custom JavaScript and CSS or polyfills?](#how-to-add-custom-javascript-and-css-or-polyfills)
 - [How to use React Styleguidist with Preact?](#how-to-use-react-styleguidist-with-preact)
 - [How to change styles of a style guide?](#how-to-change-styles-of-a-style-guide)
@@ -83,6 +84,27 @@ global.Button = Button;
 
 The `Button` component will be available in every example without a need to `require` it.
 
+## How to set global styles for user components?
+
+Using the [jss-global](https://github.com/cssinjs/jss-global) API you can set global styles in your config so that you don't have to set them in each component:
+
+```javascript
+module.exports = {
+	components: 'src/components/**/[A-Z]*.js',
+	styles: {
+		StyleGuide: {
+			'@global body': {
+				fontFamily: 'Helvetica',
+			},
+		},
+	},
+};
+```
+
+Above, we have set `font-family: 'Helvetica';` on the body.
+
+> **Note:** This does not set styles on the style guide UI.
+
 ## How to add custom JavaScript and CSS or polyfills?
 
 In your style guide config:
@@ -153,7 +175,7 @@ module.exports = {
 
 > **Note:** See available [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/styles/theme.js).
 
-> **Note:** Styles use [JSS](https://github.com/cssinjs/jss/blob/master/docs/json-api.md) with these plugins: [jss-isolate](https://github.com/cssinjs/jss-isolate), [jss-nested](https://github.com/cssinjs/jss-nested), [jss-camel-case](https://github.com/cssinjs/jss-camel-case), [jss-default-unit](https://github.com/cssinjs/jss-default-unit), [jss-compose](https://github.com/cssinjs/jss-compose).
+> **Note:** Styles use [JSS](https://github.com/cssinjs/jss/blob/master/docs/json-api.md) with these plugins: [jss-isolate](https://github.com/cssinjs/jss-isolate), [jss-nested](https://github.com/cssinjs/jss-nested), [jss-camel-case](https://github.com/cssinjs/jss-camel-case), [jss-default-unit](https://github.com/cssinjs/jss-default-unit), [jss-compose](https://github.com/cssinjs/jss-compose) and [jss-global](https://github.com/cssinjs/jss-global).
 
 > **Note:** Use [React Developer Tools](https://github.com/facebook/react-devtools) to find component and style names. For example a component `<LogoRenderer><h1 className="logo-524678444">…` corresponds to an example above.