You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Wrapping Fluent UI v9 controls as a component is the easiest way to utilize modern theming because the modern theme is automatically applied to these controls. The only prerequisite is to ensure your component adds a dependency on the [React controls & platform libraries (Preview)](../../component-framework/react-controls-platform-libraries.md) as shown below. This approach allows your component to use the same React and Fluent libraries as the platform, and therefore share the same React context that passes the theme tokens down to the component.
35
+
Wrapping Fluent UI v9 controls as a component is the easiest way to utilize modern theming because the modern theme is automatically applied to these controls. The only prerequisite is to ensure your component adds a dependency on the [React controls & platform libraries (preview)](react-controls-platform-libraries.md) as shown below. This approach allows your component to use the same React and Fluent libraries as the platform, and therefore share the same React context that passes the theme tokens down to the component.
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/react-controls-platform-libraries.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: "React controls & platform libraries (Preview) | Microsoft Docs"
2
+
title: "React controls & platform libraries (preview) | Microsoft Docs"
3
3
description: "You can achieve significant performance gains using React and platform libraries. When you use React and platform libraries, you are using the same infrastructure used by the Power Apps platform. This means you no longer have to package React and Fluent packages individually for each control."
4
4
keywords: "Component Framework, code components, Power Apps controls"
Copy file name to clipboardExpand all lines: powerapps-docs/developer/component-framework/sample-controls/modern-theming-api-control.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ contributors:
15
15
16
16
# Implementing a modern theming API component
17
17
18
-
This sample component shows use cases to use the modern theming API capabilities to style your component based on the current theme used in your app. The imported components adhere to the default Power Apps modern theme initially, until you [enable modern controls and themes for your app](../../../powerapps/maker/canvas-apps/controls/modern-controls/overview-modern-controls.md#enable-modern-controls-and-themes-for-your-app) and [apply a modern theme](../../../maker/canvas-apps/controls/modern-controls/modern-theming#apply-modern-theme).
18
+
This sample component shows use cases to use the modern theming API capabilities to style your component based on the current theme used in your app. The imported components adhere to the default Power Apps modern theme initially, until you [enable modern controls and themes for your app](../../../maker/canvas-apps/controls/modern-controls/overview-modern-controls.md#enable-modern-controls-and-themes-for-your-app) and [apply a modern theme](../../../maker/canvas-apps/controls/modern-controls/modern-theming.md#apply-modern-theme).
19
19
20
20
:::row:::
21
21
:::column:::
@@ -37,10 +37,10 @@ Model-driven and canvas apps
37
37
38
38
The sample component demonstrates four different examples consuming the Power Apps modern theming API.
39
39
40
-
- Fluent v9 sample with automatic application of the current modern theme: [Automatic Modern Theming](../../component-framework/fluent-modern-theming.md#automatic-modern-theming)
41
-
- Fluent v8 sample styling itself by creating its own v8 ThemeProvider based on the v9 theme tokens passed via the PCF context parameters: [Modern Theming for Fluent UI v8 controls](../../component-framework/fluent-modern-theming.md#modern-theming-for-fluent-ui-v8-controls)
42
-
- Non-Fluent sample that applies styling to its HTML elements by directly referencing v9 theme tokens passed via the PCF context parameters: [Modern Theming for non-Fluent UI controls](../../component-framework/fluent-modern-theming.md#modern-theming-for-non-fluent-ui-controls)
43
-
- Fluent v9 sample creating its own custom v9 FluentProvider modifying the theme passed via the PCF context parameters. [Modern Theming via PCF context parameters](../../component-framework/fluent-modern-theming.md#modern-theming-via-pcf-context-parameters)
40
+
- Fluent v9 sample with automatic application of the current modern theme: [Fluent UI v9 controls](../fluent-modern-theming.md#fluent-ui-v9-controls)
41
+
- Fluent v8 sample styling itself by creating its own v8 ThemeProvider based on the v9 theme tokens passed via the PCF context parameters: [Fluent UI v8 controls](../fluent-modern-theming.md#fluent-ui-v8-controls)
42
+
- Non-Fluent sample that applies styling to its HTML elements by directly referencing v9 theme tokens passed via the PCF context parameters: [Non-Fluent UI controls](../fluent-modern-theming.md#non-fluent-ui-controls)
43
+
- Fluent v9 sample creating its own custom v9 FluentProvider modifying the theme passed via the PCF context parameters. [Custom theme providers](../fluent-modern-theming.md#custom-theme-providers)
44
44
45
45
You can download the sample component from [PowerApps-Samples/component-framework/FluentThemingAPIControl](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework/FluentThemingAPIControl).
46
46
@@ -50,8 +50,8 @@ You can download the sample component from [PowerApps-Samples/component-framewor
50
50
[How to use the sample components](../use-sample-components.md)
51
51
[Power Apps component framework API reference](../reference/index.md)
52
52
[Style components with modern theming (Preview)](../../component-framework/fluent-modern-theming.md)
0 commit comments