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.