如何在 angular 中更改 simplebar 颜色

Question

我在我的 angular 应用程序中实现了一个 simplebar，就像这个 demo。

我尝试按照文档更改颜色：

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

但是还是不行，请问还有什么方法可以改颜色吗？

Answer 1

您正在尝试更改另一个组件的组件样式。 或者你改变全局样式或者你像这样改变组件样式：

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

一个工作示例（从全局样式更改）：https://stackblitz.com/edit/simplebar-angular-demo-2hcxnj?file=src/styles.css

Answer 2

像这样使用简单的css：

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

其中一个示例使用 yellow/red 渐变。你可以实现类似这样的东西：

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

更多详情，您可以阅读这篇link https://github.com/Grsmto/simplebar/issues/431