@layershifter provided this workaround:

import {
  teamsDarkTheme,
  FluentProvider,
  useThemeClassName
} from "@fluentui/react-components";
import * as React from "react";

function ApplyToBody() {
  const classes = useThemeClassName();

  React.useEffect(() => {
    const classList = classes.split(" ");
    document.body.classList.add(...classList);

    return () => document.body.classList.remove(...classList);
  }, [classes]);

  return null;
}

export const Default = () => {
  return (
    <FluentProvider theme={teamsDarkTheme}>
      <ApplyToBody />
      <div>Hello world</div>
    </FluentProvider>
  );
};

It's good to have a workaround but this will be unobvious to customers. They'll need to do this every time they build a new app and need to apply the theme class to body. Options:

• Ergonomic and upgrade friendly: add applyTo prop, makes transitioning easier.
• Acceptable, but not user-friendly: Ship ApplyToBody component in fluent and document it.
• Messy: suggest apps call useThemeClassName. It shouldn't be exported; less surface = less breaks, less documentation requirements.

I believe MUI uses something similar to option 2:

https://mui.com/material-ui/react-css-baseline/

return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <h1>Grey h1 element</h1>
    </ThemeProvider>
  );

Which is acceptable, it has the benefit of compartmentalizing the logic of applying the baseline css to a separate component, but just requires someone look up what to do on stack overflow.

Having a dedicated prop applyTo="body" on FluentProvider would be a cheap solution and most ergonomic and discoverable for customers.

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

Boo, soft close. Should be addressed.