Hi!
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.