I am trying to use Mantine React Table library (https://www.mantine-react-table.com/docs/examples/basic) like
library example
but the problem is that I already have some presets for Mantine. For example, you can see on this imeage that sort button turns out to be green unlike original library example:
my usage
What is the best way to make it so that it sticks to default styling just on this library table?
Thank you.
For now, I have tried extracting class names of library table’s inner components and manually turn off presets inside css file.
For example, for toolbar on top I saw that it is this on dev tools
<div class="MRT_TopToolbar-module_actions-container__-uL0u MRT_TopToolbar-module_actions-container-stack-alert__OYDL6 m_8bffd616 mantine-Flex-root __m__-re4">...</div>
so I tried setting css manually like this
.mantine-react-table-container .m_8bffd616 { justify-content: space-between !important; }
and many other combinations like including all classnames listed on that div and using one only and so on, but all did not work.
for example above, i tried with m_8bffd616 because on dev tools thats the class that assigns display: flex and allows me to try toggle between different justify options like space-between.