feat(react-provider): add applyStylesTo prop for theme token styling control #33632

dmytrokirpa · 2025-01-13T17:01:26Z

Previous Behavior

In v8 and prior versions, FluentProvider included an applyTo prop that allowed applying theme styles to the body element. This was crucial for web apps using dark theme, as it enabled:

Setting correct background/foreground colors
Applying font family, size, and weight defaults
Applying theme styles at the root level while maintaining contained behavior as the default

New Behavior

This PR reintroduces this functionality in v9 through a new applyStylesTo prop on FluentProvider. This addition:

Simplifies migration from v8 to v9
Maintains familiar developer experience
Solves a major theming limitation in v9

Alternatives Considered

Document a workaround using a custom hook to apply theme classes
Create and expose a dedicated hook/component for theme class application

Adding the applyStylesTo prop to FluentProvider was chosen because it:

Requires minimal implementation effort
Avoids introducing new APIs that need testing/documentation
Maintains consistency with v8's mental model
Efficiently solves the use case without system complexity

Related Issue

Fixes #23626

…control

change/@fluentui-react-provider-5a31a189-02e4-434d-969d-974f758f5b17.json

github-actions · 2025-01-13T20:39:18Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Button, FluentProvider & webLightTheme	`69.21 kB` `20.174 kB`	`69.472 kB` `20.263 kB`	`262 B` `89 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`222.703 kB` `64.42 kB`	`222.965 kB` `64.498 kB`	`262 B` `78 B`
`react-components` react-components: FluentProvider & webLightTheme	`44.447 kB` `14.59 kB`	`44.709 kB` `14.679 kB`	`262 B` `89 B`
`react-components` react-components: entire library	`1.164 MB` `291.232 kB`	`1.164 MB` `291.325 kB`	`262 B` `93 B`
`react-provider` FluentProvider	`24.623 kB` `8.893 kB`	`24.885 kB` `8.978 kB`	`262 B` `85 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-avatar` Avatar	`49.303 kB` `15.815 kB`
`react-avatar` AvatarGroup	`20.106 kB` `7.968 kB`
`react-avatar` AvatarGroupItem	`63.447 kB` `20.034 kB`
`react-breadcrumb` @fluentui/react-breadcrumb - package	`114.291 kB` `31.695 kB`
`react-card` Card - All	`101.77 kB` `28.772 kB`
`react-card` Card	`94.544 kB` `26.951 kB`
`react-card` CardFooter	`14.355 kB` `5.79 kB`
`react-card` CardHeader	`16.888 kB` `6.669 kB`
`react-card` CardPreview	`14.42 kB` `5.922 kB`
`react-checkbox` Checkbox	`35.118 kB` `12.077 kB`
`react-color-picker-preview` ColorArea	`50.263 kB` `17.553 kB`
`react-color-picker-preview` ColorPicker	`32.22 kB` `11.925 kB`
`react-color-picker-preview` ColorSlider	`41.577 kB` `15.42 kB`
`react-combobox` Combobox (including child components)	`105.536 kB` `34.512 kB`
`react-combobox` Dropdown (including child components)	`106.16 kB` `34.454 kB`
`react-datepicker-compat` DatePicker Compat	`225.318 kB` `63.786 kB`
`react-dialog` Dialog (including children components)	`100.417 kB` `30.097 kB`
`react-field` Field	`23.399 kB` `8.898 kB`
`react-input` Input	`28.014 kB` `9.444 kB`
`react-list` List	`89.164 kB` `26.599 kB`
`react-list` ListItem	`112.731 kB` `33.432 kB`
`react-menu` Menu (including children components)	`154.048 kB` `46.506 kB`
`react-menu` Menu (including selectable components)	`156.729 kB` `46.992 kB`
`react-overflow` hooks only	`12.808 kB` `4.819 kB`
`react-persona` Persona	`56.194 kB` `17.695 kB`
`react-popover` Popover	`130.294 kB` `40.69 kB`
`react-portal` Portal	`14.563 kB` `5.118 kB`
`react-portal-compat` PortalCompatProvider	`8.39 kB` `2.64 kB`
`react-progress` ProgressBar	`17.084 kB` `6.891 kB`
`react-radio` Radio	`32.672 kB` `10.343 kB`
`react-radio` RadioGroup	`15.762 kB` `6.423 kB`
`react-select` Select	`27.732 kB` `10.124 kB`
`react-slider` Slider	`37.52 kB` `12.621 kB`
`react-spinbutton` SpinButton	`34.839 kB` `11.63 kB`
`react-swatch-picker` @fluentui/react-swatch-picker - package	`105.086 kB` `30.516 kB`
`react-switch` Switch	`35.319 kB` `11.314 kB`
`react-table` DataGrid	`161.034 kB` `45.71 kB`
`react-table` Table (Primitives only)	`42.666 kB` `13.854 kB`
`react-table` Table as DataGrid	`131.869 kB` `36.57 kB`
`react-table` Table (Selection only)	`70.536 kB` `19.999 kB`
`react-table` Table (Sort only)	`69.179 kB` `19.61 kB`
`react-tag-picker` @fluentui/react-tag-picker - package	`185.227 kB` `55.684 kB`
`react-tags` InteractionTag	`15.199 kB` `6.157 kB`
`react-tags` Tag	`29.072 kB` `9.55 kB`
`react-tags` TagGroup	`82.719 kB` `24.524 kB`
`react-teaching-popover` TeachingPopover	`91.711 kB` `27.921 kB`
`react-textarea` Textarea	`26.572 kB` `9.755 kB`
`react-timepicker-compat` TimePicker	`108.525 kB` `36.087 kB`
`react-toast` Toast (including Toaster)	`101.371 kB` `30.477 kB`
`react-tooltip` Tooltip	`57.131 kB` `19.949 kB`
`react-tree` FlatTree	`145.462 kB` `41.771 kB`
`react-tree` PersonaFlatTree	`146.15 kB` `41.881 kB`
`react-tree` PersonaTree	`142.381 kB` `40.703 kB`
`react-tree` Tree	`141.693 kB` `40.602 kB`

_{🤖 This report was generated against f66e15caa085fc79bff081c801ae465c24052d5f}

github-actions · 2025-01-13T20:41:38Z

Pull request demo site: URL

dmytrokirpa · 2025-01-14T09:14:29Z

packages/react-components/react-provider/stories/src/Provider/index.stories.tsx

@@ -19,5 +20,8 @@ export default {
        component: [descriptionMd, bestPracticesMd].join('\n'),
      },
    },
+    reactStorybookAddon: {
+      disabledDecorators: ['FluentProvider'],


Disabled the FluentProvider decorator from @fluentui/react-storybook-addon, as it is unnecessary for stories that already include FluentProvider.

feat(react-provider): add applyStylesTo prop for theme token styling …

8db6df5

…control

dmytrokirpa added Fluent UI react-components (v9) Component: FluentProvider labels Jan 13, 2025

dmytrokirpa self-assigned this Jan 13, 2025

fabricteam reviewed Jan 13, 2025

View reviewed changes

change/@fluentui-react-provider-5a31a189-02e4-434d-969d-974f758f5b17.json Show resolved Hide resolved

update api.md

0f0b5fa

fix lint

4da12cf

dmytrokirpa requested a review from a team January 14, 2025 09:11

Merge branch 'master' into feat/add-apply-styles-to-body

5c1b0e6

dmytrokirpa commented Jan 14, 2025

View reviewed changes

dmytrokirpa added 4 commits January 14, 2025 10:16

fix typo

fde68b4

udpate test

7e639e1

fix typo

c024dc3

Merge branch 'master' into feat/add-apply-styles-to-body

9291c31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-provider): add applyStylesTo prop for theme token styling control #33632

feat(react-provider): add applyStylesTo prop for theme token styling control #33632

dmytrokirpa commented Jan 13, 2025

github-actions bot commented Jan 13, 2025 •

edited

Loading

github-actions bot commented Jan 13, 2025

dmytrokirpa Jan 14, 2025

feat(react-provider): add applyStylesTo prop for theme token styling control #33632

Are you sure you want to change the base?

feat(react-provider): add applyStylesTo prop for theme token styling control #33632

Conversation

dmytrokirpa commented Jan 13, 2025

Previous Behavior

New Behavior

Alternatives Considered

Related Issue

github-actions bot commented Jan 13, 2025 • edited Loading

📊 Bundle size report

github-actions bot commented Jan 13, 2025

dmytrokirpa Jan 14, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 13, 2025 •

edited

Loading