The drag cursor is missing on react electron, how to solve it?

[gclsoft]

   <SplitPane split="vertical"
                minSize={50}
                maxSize={300}
                defaultSize={100}
                className="primary"
                pane1Style={styleA}
                resizerStyle={styleC}
                       resizerClassName={styles.Resizer.vertical}
            >
                <div />
                <SplitPane resizerClassName={styles.Resizer.horizontal} split="horizontal" paneStyle={styleD} pane2Style={styleB}>
                    <div>Hello...</div>
                    <div> ...world.</div>
                </SplitPane>
            </SplitPane>
            // <div style={{ 'backgroundColor': 'red', 'heght': '100%', 'display': 'flex', 'flexDirection': 'row', 'width': '100%' }}>
            //     <SplitPane resizerClassName={styles.Resizer} split="vertical" defaultSize="33%">
            //         <div>pane 1 size: 33%</div>
            //         <SplitPane resizerClassName={styles.Resizer} split="vertical" defaultSize="50%">
            //             <div>pane 2 size: 50% (of remaining space)</div>
            //             <div>pane 3</div>
            //         </SplitPane>
            //     </SplitPane>
            // </div>

The drag cursor is missing on react electron, how to solve it? I had import the css class file

[wuweiweiwu]

I would double check that the css has a cursor: pointer attribute. You can inspect element in electron to see what css styles are applied

[Joel-Raju]

Add styles to the Resizer. https://github.com/tomkp/react-split-pane/blob/master/website/index.css#L29

.Resizer {
  box-sizing: border-box;
  background: #000;
  opacity: 0.5;
  z-index: 1;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.Resizer.horizontal {
  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%;
}

.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}