base-no-reset.css overrides the base html font size

[warmbowski]

html {
  font-size: unset !important;
}

base.css and base-no-reset.css contains what seems like a pretty egregious misuse of !important by overriding the base font-size for the html element with an unset. This seems especially odd to do in the "no-reset" css file, which by definition shouldn't reset that element. Ideally, this should really have an escape hatch using css variables for folks who aren't using @patternfly/react-* generally for their web site. For my use, I am integrating one particular react component (log-viewer) into an established site that uses MUI react lib and it's theming generally. All base font sizes are set in 'rem' units, so messing with the base html element font-size cascades into messing up all base font sizes.

Can you add a variable to override in future versions in the base css files, and/or take completely out of the no-reset css?

[Marc19]

We are experiencing the same issue. All of the fonts are affected and it's currently blocking us. @mcoker Do you have an idea when is this issue going to be tackled? In the interim, is there some way you can think of to prevent this behavior? @warmbowski Have you figured out something? Thanks!

[warmbowski]

Yeah, basically we worked around it by using React Helmet in our app to add a style tag with the css to override it with a !important.

html { font-size: 14px !important }

Less than ideal, but it works.

[mcoker]

Hey @Marc19 and @warmbowski, thanks for the issue. Just wanted to check in and say I'm hoping to have a look at this tomorrow and see if there is anything we can do. I agree this is something you should be able to opt out of easily.

You can see some context in the comments as to why that style was added, and that it's able to be removed by setting $pf-global--unset-root-font-size: false; and compiling the PF SCSS, if that's an option currently.

https://github.com/patternfly/patternfly/blob/9ab78a81b9d6d63cd7795fa82b1ff673abba5332/src/patternfly/base/_common.scss#L12-L21