Merge vanilla styles with same id

* adapt findStyle method
* extend Styles documentation

packages/vanilla/Styles.md

@@ -79,3 +79,33 @@ const styleContextValue = { styles: [
   />
 </JsonFormsStyleContext.Provider>
 ```
+
+You can also extend the existing default styles.
+Thereby, the existing style classes as well as your custom ones will be applied.
+This is the case, because all style definitions for an ID are merged.
+Add the default styles to your custom style definition by using the spread operator.
+
+```typescript
+import { JsonFormsStyleContext, vanillaStyles } from '@jsonforms/vanilla-renderers';
+
+const styleContextValue = { styles: [
+  ...vanillaStyles,
+  {
+    name: 'control.input',
+    classNames: ['custom-input']
+  },
+  {
+    name: 'array.button',
+    classNames: ['custom-array-button']
+  }
+]};
+
+<JsonFormsStyleContext.Provider value={styleContextValue}>
+  <JsonForms
+    data={data}
+    schema={schema}
+    uischema={uischema}
+    ...
+  />
+</JsonFormsStyleContext.Provider>
+```

packages/vanilla/src/reducers/styling.ts

@@ -22,10 +22,10 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import isEmpty from 'lodash/isEmpty';
 import remove from 'lodash/remove';
-import find from 'lodash/find';
 import join from 'lodash/join';
+import filter from 'lodash/filter';
+import reduce from 'lodash/reduce';
 import { REGISTER_STYLE, REGISTER_STYLES, UNREGISTER_STYLE } from '../actions';
 import { StyleDef } from '../styles';
 
@@ -47,15 +47,13 @@ export const findStyle = (styles: StyleDef[]) => (
   style: string,
   ...args: any[]
 ): string[] => {
-  const foundStyle = find(styles, s => s.name === style);
-  if (!isEmpty(foundStyle) && typeof foundStyle.classNames === 'function') {
-    const res = foundStyle.classNames(args);
-    return res;
-  } else if (!isEmpty(foundStyle)) {
-    return foundStyle.classNames as string[];
-  }
-
-  return [];
+  const foundStyles = filter(styles, s => s.name === style);
+  return reduce(foundStyles, (res: string[], style: StyleDef) => {
+    if (typeof style.classNames === 'function') {
+      return res.concat(style.classNames(args));
+    }
+    return res.concat(style.classNames);
+  }, []);
 };
 
 export const findStyleAsClassName = (styles: StyleDef[]) => (