Improve Customization Example

[spaceymonk]

The statement on this page,

You can use different colors for each menu item, separator, and arrow. You can also use the theme prop to set a predefined theme.

should be explained in more detail and an example story should be written.

Suggestion: Perhaps the component's interface can be updated into something more intiutive. For example taking additional props to modify underlying components (one such donated as __rrm-base CSS class).

An example may contain giving different colors to each sub-menu item.

[spaceymonk]

In the latest release (v2.0.3+) you can update styles using combination of CSS classes and definitions:

1. Define a CSS class name: orange-bg
2. Create a CSS rule, targeting the path element directly underneath it:

   .orange-bg > path {
   fill: orange;
   }

3. Import the CSS file and pass the class name to the MenuItem or SubMenu element:

   <SubMenu {/*... */}  className="orange-bg">

   ---

Before this release there was a bug in SubMenu component. I forgot to add line which is fixed in this new release.

Moreover, I want to discuss whether this is enough for now or there should be additional props that can be passed to underlying components such as path and foreignObject alike. In the current implementation you pass props to wrapping g element which obscures the changes from actual drawing component (path element in this case).