流利的用户界面反应团队的主题答案

【问题标题】：Fluent ui react theme for teams流利的用户界面反应团队的主题
【发布时间】：2021-06-27 09:16:27
【问题描述】：

我正在构建一个团队应用程序，我想使用 fluent 主题设置团队主题，主题提供程序中主题的确切值是什么，我可以同时使用 fluentui/Northstar 和 fluentui/react 吗？

【问题讨论】：

参考：fluentsite.z22.web.core.windows.net/0.56.0/quick-start

标签： themes microsoft-teams fluent-ui fluentui-react

【解决方案1】：

请查看Designing your Microsoft Teams app with UI templates。这些模板是基于 Fluent UI 的组件的集合，可在常见的 Teams 用例中使用，让您有更多时间为您的用户找出最佳体验。

【讨论】：

我目前正在使用 fluent/react 详细信息列表，我已将其包装在来自 fluent/Northstar 的团队主题提供程序中。当我更改团队主题时，主题不会应用于详细信息列表组件。 Fluent 反应，当 Fluent Northstar 的所有其他组件工作正常时
如何处理基于流利反应的组件的团队主题（默认、暗、对比）模式

【解决方案2】：

@UmamaheshwariG - 您可以使用包“@fluentui/react-northstar”来处理团队主题。

像下面这样使用它：从“@fluentui/react-northstar”导入 { Provider, teamsTheme, teamsDarkTheme, teamsHighContrastTheme }

public setThemeComponent = () => {
    const rtl = i18n.dir() === "rtl";

    if (this.state.theme === "dark") {
        return (
            <Provider theme={teamsDarkTheme} rtl={rtl}>
                <div className="darkContainer">
                    {this.getAppDom()}
                </div>
            </Provider>
        );
    }
    else if (this.state.theme === "contrast") {
        return (
            <Provider theme={teamsHighContrastTheme} rtl={rtl}>
                <div className="highContrastContainer">
                    {this.getAppDom()}
                </div>
            </Provider>
        );
    } else {
        return (
            <Provider theme={teamsTheme} rtl={rtl}>
                <div className="defaultContainer">
                    {this.getAppDom()}
                </div>
            </Provider>
        );
    }
}

您还可以参考以下示例应用程序： https://github.com/OfficeDev/microsoft-teams-apps-company-communicator/blob/master/Source/CompanyCommunicator/ClientApp/src/App.tsx

【讨论】：

有帮助，谢谢