Open waheed25 opened 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; }
@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.
@waheed25 What does style.dragbar
evaluate to? "dragbar"
?
Yes it is evaluated to dragbar class which is we define in our .less file for overriding css.
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.
Hi, Can you please show me some example of styles overriding of drag-bar.