[dash mantine components] bug in bottom border color of activated Tab


So, I was trying to style mantine tabs, because I wanted a smooth grubox scheme on my page. The problem is that when using outline variant of tabs, selected tab suddenly gets appended with a white line below, like this:


This element seems to be added by mantine itself with the following kind of css:

When default scheme is used (black and white, as in example), these styles give the right look for a selected tab, but with other schemes it just pop out of the blue. Turning of background-color indeed solves the problem, but pay attention to the selected part on the screenshot above – the prop’s name is generated, so no custom css for that.

I managed to counteract it with .mantine-Tabs-tab[data-active="true"]::before, rewiring bg color and contents, but it seems (for me) to be a rather hacky and daunting way to solve the problem.

As for the possible solution – wouldn’t that be nice if this pseudo-element inherited the bg color of a tab itself?

I would much appreciate any critique of my logic in case I missed some other way of dealing with this issue.