-
Beta Was this translation helpful? Give feedback.
Answered by
KingSora
Oct 24, 2023
Replies: 1 comment 5 replies
-
@krutoo Please use a non-empty string for the theme name, and then use the theme name as the selector for your scrollbars: <OverlayScrollbarsComponent options={{ scrollbars: { theme: 'custom-scrollbar-theme' } }}>
{children}
</OverlayScrollbarsComponent> .custom-scrollbar-theme {
max-width: 100%;
max-height: 100%;
--os-size: 12px;
--os-padding-perpendicular: 0;
--os-padding-axis: 0;
--os-track-border-radius: 0;
--os-track-bg: #f00;
--os-handle-border-radius: 2px;
--os-handle-bg: #0f0;
--os-handle-min-size: 33px;
--os-handle-perpendicular-size: 100%;
--os-handle-perpendicular-size-hover: 100%;
--os-handle-perpendicular-size-active: 100%;
} |
Beta Was this translation helpful? Give feedback.
5 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@krutoo in this case, please load the css of the library first and after it your custom styles (Styles loaded later have higher priority). Or use a more specific selector for your custom style, such as
.custom-scrollbar-theme.os-scrollbar