Unable to override global staticStyles in FluentThemeProvider

[levimiller-qhrtech]

Describe the bug; what happened? The default teams theme from fluent ui adds a couple global styles that are extremely disruptive:

  '*': {
    boxSizing: 'border-box',
  },
  '*:before': {
    boxSizing: 'border-box',
  },
  '*:after': {
    boxSizing: 'border-box',
  },

These end up in a style tag at the bottom of the head tag which makes it very difficult to unset.

What are the steps to reproduce the issue? Use FluentThemeProvider in any way (including in a composite), inspect the dom for the style tag with data-fela-type="STATIC", find the wildcard styles right under normalize css.

What behavior did you expect? Some way to override these styles, or for them to be removed. Normalize css doesn't really bother me because it's not that intrusive, but the wildcard styles are very disruptive.

Maybe a field in the Theme object that's passed in to FluentThemeProvider/the composites?

If applicable, provide screenshots:

In what environment did you see the issue? N/A

Is there any additional information? I can work around it by wrapping everything in

import {  Provider } from '@fluentui/react-northstar';

<Provider theme={{
  staticStyles: [
    {
      '*': {
        boxSizing: 'unset',
      },
      '*:before': {
        boxSizing: 'unset',
      },
      '*:after': {
        boxSizing: 'unset',
      }
    }
  ]
}}>
</Provider>

Here's some links to where everything is happening:

• https://github.com/microsoft/fluentui/blob/master/packages/fluentui/react-northstar/src/themes/teams/index.tsx
• https://github.com/microsoft/fluentui/blob/master/packages/fluentui/react-northstar/src/themes/teams/staticStyles/index.ts
• https://github.com/microsoft/fluentui/blob/master/packages/fluentui/react-northstar/src/themes/teams/staticStyles/globalStyles.ts
• https://github.com/Azure/communication-ui-library/blob/main/packages/react-components/src/theming/FluentThemeProvider.tsx#L37

[PorterNan]

Thanks for reporting the issue and also thanks for providing the workaround, this sounds like a fluent northstar issue that their provider is polluting global css environment, a new issue was just opened on their side. Since you have a nice workaround, so no hotfixes needed right now, let's keep our eyes on the issue on northstar side

[anjulgarg]

Closing this issue as we can't provide a fix for this and there is a workaround.