GWT: how to have different styles for splitters in different SplitLayoutPanels?

I know you can change the styles of the splitters with the defaults styles listed in the docs:

.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger }
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger }

and we've done that in earlier development. However, now I'm developing new stuff and would like to use a different style for the splitters in a new SplitLayoutPanel. Unfortunately, we haven't or can't split the app into different modules, which might make this easier.

I tried creating a new style and applying it to my new SplitLayoutPanel, but it didn't appear to have any effect on the splitters. I thought there might be a me开发者_StackOverflow社区thod to get a handle on the splitters in order to apply the new style to only them, but I didn't find any such method.

---

The best way to do this would be to use CSS selectors and add a style name to your SplitLayoutPanels.

SplitLayoutPanel greenPanel = new SplitLayoutPanel();
greenPanel.addStyleName("green");
greenPanel.addEast(new Label("Green East"), 50);
greenPanel.add(new Label("Green Center"));
SplitLayoutPanel redPanel = new SplitLayoutPanel();
redPanel.addStyleName("red");
redPanel.addNorth(new Label("Red North"), 50);
redPanel.add(new Label("Red Center"));

StyleInjector.inject(".green.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { background: green; }");
StyleInjector.inject(".green.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { background: green; }");
StyleInjector.inject(".red.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { background: red; }");
StyleInjector.inject(".red.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { background: red; }");
RootLayoutPanel rlp = RootLayoutPanel.get();
rlp.add(greenPanel);
rlp.setWidgetTopHeight(greenPanel, 0, PX, 50, PCT);
rlp.add(redPanel);
rlp.setWidgetBottomHeight(redPanel, 0, PX, 50, PCT);