Fluentui: Fabric component not inheriting style anymore

[fildahui]

We use the <Fabric> component in order to inherit the font style to avoid using the SegoeUI font family.

Since version 6.84.1, however, many components do not seem to inherit the style anymore (TextField, Link, Label). Looking at the generated css the inherited style it's there but it looks like it's being overridden by the actual component's style (which before had no font styles in it)

Environment Information

• __Package version(s)__: from 6.84.1
• __Browser and OS versions__: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

Actual behavior:

From version 6.84.1, some components do not inherit style as before
See sandbox here

You'll see a Label, a TextField and a Link with the SegoeUI font applied, though I wrapped everthing within a <Fabric> component that should apply Roboto font

Expected behavior:

As of version 6.84.0 components were inheriting style when wrapped inside the <Fabric> component.
Example with version 6.84.0

You'll see a Label, a TextField and a Link using the inherited font family (Roboto)

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: High

Products/sites affected: (if applicable)

[aftab-hassan]

Looks related to the changes introduced by this commit - https://github.com/OfficeDev/office-ui-fabric-react/pull/6647
Looking into it.

[aneeshack4]

I think this will be resolved by this PR I currently have out & I'm working on fixing some of the regressions on Screener that include TextField & Link. You can see from the screener results that Label doesn't seem to have any more failures so it's likely been fixed already with the current PR

[aftab-hassan]

@dzearing did we mention on this issue about passing in a single themes object, to inherit styles, and the behavior here, being by design? Would you be able to point me to a sample or give some guidance to come up with a codepen ?

[dzearing]

The Fabric component right now is not a very reliable way to provide themed fonts. The issue we have had is that people often do not include it, and then wonder why some things (not all) are rendered in Times New Roman.

To mediate, we wanted to make sure all components render the themed font, regardless of using the Fabric component. You can override the default fonts through the theme using loadTheme. Here is an example of using Courier New everywhere:

https://codepen.io/dzearing/pen/YROWBR

Relevant code:

const DefaultFont = {
  fontFamily: 'Courier New'
};

loadTheme({
  fonts: {
    tiny: DefaultFont,
    xSmall: DefaultFont,
    small: DefaultFont,
    smallPlus: DefaultFont,
    medium: DefaultFont,
    mediumPlus: DefaultFont,
    large: DefaultFont,
    xLarge: DefaultFont,
    xxLarge: DefaultFont,
    superLarge: DefaultFont,
    mega: DefaultFont,
  }
});

[dzearing]

Let us know if that helps, or if you have more questions. :)

[dzearing]

I've updated your sandbox to use the inherit fontFamily, as you were doing before, but using loadTheme. This means you really don't need the Fabric component anymore.

https://codesandbox.io/s/lyo543j2r7

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[kunKun-tx]

Thank you @dzearing for providing the solution. Would you mind adding this to the doc page?

Also, is there any where we can see the full list of options we can use to override the default theme? I am really new to this lib and haven't found it in the source code, yet.