Customized Styling for Resizer Component is not working

[NagarajP]

Describe the bug

Though I am passing resizerStyle as part Splitpane, however its not reflecting at Resizer component. I believe its using the default styling object.

Code Snippet:
<SplitPane split= "vertical" resizerStyle={{ color: '#f00', opacity: 0.3, }} > <div> Left Panel</div>; <div> Right Panel</div>; </SplitPane>
Please share any working example. Thanks in advance.

[scudette]

I just hit this as well - looks like that property is only defined for the typescript version but not the js version.

[scudette]

Ok i figured it out - this entire feature was removed in v0.2 and the documentation is out of sync. I could not figure out how you are supposed to style the individual components (seems class names are random as well... argh a throwback to 1995!)

fix by install the old version:

npm install [email protected]

[zoe0316]

# change the resizer backgroud color

div[data-type="Resizer"] {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255,255,255,0);
  border-bottom: 5px solid rgba(255,255,255,0);
  cursor: row-resize;
  width: 100%;

  background: red;
  opacity: 0.2;
  z-index: 1;
  box-sizing: border-box;
  background-clip: padding-box;
}