Skip to content

[Bug]: FluentProvider stylesheet (CSS vars for theme) are not server-side rendered #25425

@paularmstrong-msft

Description

@paularmstrong-msft

Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/github/paularmstrong-msft/fluentui-ssr-issue/draft/silent-smoke

Bug Description

Actual Behavior

No theme variables are server-side rendered, causing the site to initially display with no colors, incorrect fonts, incorrect spacing, etc, etc.
Screenshot 2022-10-27 at 12 59 16

Expected Behavior

When following the SSR instructions, it is expected that ALL styles are rendered to the page and do not have a flash of unstyled content (FOUC).
Screenshot 2022-10-27 at 13 02 04

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions