#how would i prevent mantine's css from overriding my fonts?

13 messages · Page 1 of 1 (latest)

bold kite
#

I explicitly do not set fonts in my application, but including mantine into my app force sets font faces somewhere. This is not desired, how would I approach going about removing that override?
Based on looking at the CSS, I need to find a way to unset or set to 'inherit' the value for mantine-font-family and mantine-font-size-md...

novel bison
#

You could possibly do this with mantine provider and creating a theme

bold kite
#

hmm. style doc says system fonts are used by default, but i'm seeing a clear difference, and supplying a theme doesn't seem to make a difference

novel bison
#

Weird. With my theme I can specify what font, font sizes....etc.

bold kite
#

ok, after further inspection, i don't think it's the face of it, although it looks quite different, it has to do with other parameters that i need to figure out how to defeat

#

a simple text box before mantine

#

and after

#

thanks for help, by the way

novel bison
#

Without some code snippets I can only throw out some guesses. Can you put some down as an example

bold kite
#

just importing mantine adds all those extra fields to my calculated css, at the very least changing all my spacings.

#

aha! probably not the recommended way, but overriding the body font-family, box-sizing, and line-height all to 'initial' gets me back to parity

novel bison
#

I can see that happening. You will either need to work with the components props, or add inline css to the component in the return

bold kite
#

Thanks for the pointers to the theme stuff, that helped me find my way into it to drill down to what was happening. I'm currently evaluating the library as an addition, so need to eliminate the side effects, since we want the browser to determine presentation as much as possible