流利的 ui 团队反应主题

Question

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

Answer 1

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

Answer 2

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

像下面这样使用它： import { Provider, teamsTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-northstar'

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

流利的 ui 团队反应主题

Fluent ui react theme for teams

themes

microsoft-teams

fluent-ui

fluentui-react