Is it possible to customize style without theme (theme: null or some string)?

[krutoo]

Hi i use latest overlayscrollbars-react with this config:

<OverlayScrollbarsComponent className='custom-scrollbar' options={{ scrollbars: { theme: null } }}>
  {children}
</OverlayScrollbarsComponent>

in my css i have:

.custom-scrollbar {
  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%;
}

but result has scrollbars with zero width/height - its invisible

in devtools i see that elements has defined css properties with zero values:

What i am doing wrong?

[KingSora]

@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%;
}

[krutoo]

@KingSora unfortunately this did not help, the styles from the library still overlap the styles that I specified

this is my styles on scrollbar element inside component:

[KingSora]

@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

[krutoo]

@KingSora Thanks for answer but i don't control order of loading css modules and regular css, its done by build system in storybook of my library and by webpack during in end project

Is it possible to use default values instead of explicitly defined variables like this:

.os-scrollbar {
  /* there is no custom css properties */
}

.os-handle {
  width: var(--os-size, 12px); /* default value when its not provided */
}

That would be very helpful

[KingSora]

How do you load / import the css of the library? If you import it in your index.js, you can control the order by import the css file first and your components after.

Regarding the default values, I'll have a look :)

[krutoo]

How do you load / import the css of the library? If you import it in your index.js, you can control the order by import the css file first and your components after.

@KingSora Looks like the order of imports helped, thanks