Opacity on scroll possible to change only through styles prop on ScrollArea

[dipiash]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.14.1

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

Try to change thumb opacity through classes, but it's not possible. It's possible only through styles prop with important mark. I use @maintine/emotion.

Example

Styles:

thumb: {
    backgroundColor: '#71717d',
    opacity: '30%',
  },

Component:

<ScrollArea
  classNames={{ thumb: classes.thumb }}
  styles={{ thumb: { opacity: '0.3!important' } }}
>
  children}
</ScrollArea>

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.14.3