zesik / react-splitter-layout

A simple split layout for React and modern browsers. https://zesik.com/react-splitter-layout
MIT License
428 stars 131 forks source link

How to overRide drag bar styles #26

Open waheed25 opened 6 years ago

waheed25 commented 6 years ago

Hi, Can you please show me some example of styles overriding of drag-bar.

louislang commented 6 years ago

@waheed25 You can set a custom class name on the SplitterLayout, for example:

<SplitterLayout customClassName="foobar" ...>

Then in the CSS you deliver can update the horizontal bar style with:

.foobar .splitter-layout > .layout-splitter { background: red; }

or the vertical bar style with: .foobar.splitter-layout.splitter-layout-vertical > .layout-splitter { background: green; }

waheed25 commented 6 years ago

@LouisLang I am using .less preprocessor and here is my implementation <SplitterLayout customClassName={style.dragbar} secondaryInitialSize={500} vertical={true}>

and here is my code in .less file

.dragbar .splitter-layout > .layout-splitter { background-color: red; }

.dragbar .splitter-layout.splitter-layout-vertical > .layout-splitter { background-color: green; }

but no luck still default classes are applying on dragBar.

louislang commented 6 years ago

@waheed25 What does style.dragbar evaluate to? "dragbar"?

waheed25 commented 6 years ago

Yes it is evaluated to dragbar class which is we define in our .less file for overriding css.

louislang commented 6 years ago

I'd double check that the HTML being produced actually has the class you want applied to those elements. Perhaps minimizing the variables and hardcoding the customClassName will help you isolate where things are going wrong.