how to change simplebar color in angular

Question

I implemented a simplebar in my angular application like the one in this demo.

I tried to change the color following the documentation:

.simplebar-scrollbar::before {
  background-color: red;
}

But it did not work, is there any other way to change to color ?

Answer 1

You're trying to change a component style from another component. Or you change the global style or you change the component style like this:

::ng-deep .simplebar-scrollbar::before {
  background-color: red !important;
}

A working example (changing from global style): https://stackblitz.com/edit/simplebar-angular-demo-2hcxnj?file=src/styles.css

Answer 2

Use simple css like this:

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    background-color: 'orange"
}

One of the samples uses a yellow/red gradient. You can achieve something similar like this:

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
       background-image: linear-gradient( yellow , red);
}

For more details, you can read this link https://github.com/Grsmto/simplebar/issues/431