screen shot of chrome inspection of css classes

Assign to Art to determine if overriding the ui-widget style is supposed to be done via styleClass, or if the test should be changed.

This issue also applies to ace:menuBar. StyleClass is not displayed as expected.

The custom style class is added correctly to the root containers of these components. I verified that the root container has the custom style classes added at the end of its 'class' attribute, after the all the jQuery and Wijmo classes. The reason why the custom class doesn't override the other styles visually seems to be due to the way the jQuery UI and Wijmo classes are defined. In pretty much any other case, adding a custom style class at the end of the 'class' attribute overrides all other stylings defined by the classes that appear before it. However, this is not occurring with these components for some obscure reason. I tried adding the custom style class at the beginning of the 'class' attribute, and it didn't override the other stylings.

The way to solve this is at the app level, by simply making the custom CSS classes more specific. In the case of the contextMenu test app, defining the custom class in either of the following ways will effectively override the stylings of the other classes:

	div.customStyling {
		border:2px dotted red;
		font-size:10px;
	}

	.customStyling {
		border:2px dotted red !important;
		font-size:10px !important;
	}

In the first case, we simply make the custom class more specific, so it has more precedence. In the second case, we add the '!important' keyword to every rule defined in the class to force precedence.

Added the recommendations above to the wiki for the menu components.