search

tomkp / react-split-pane

React split-pane component
https://tomkp.github.io/react-split-pane
MIT License
3.23k stars 408 forks source link

Customized Styling for Resizer Component is not working #632

Open NagarajP opened 4 years ago

NagarajP commented 4 years ago

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, }}

Left Panel
;
Right Panel
; ` Please share any working example. Thanks in advance.
scudette commented 4 years ago

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

scudette commented 4 years ago

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 react-split-pane@0.1.92
zoe0316 commented 4 years ago 
# 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;
}