更改主题，例如 Fabric Web（默认/深色）

在fabric的文档页面中，现在每个示例组件都有更改主题功能 IE：example https://developer.microsoft.com/en-us/fabric#/controls/web/button 在此输入图像描述 https://i.stack.imgur.com/GP9e2.png

我怎样才能实现这个功能。我有 2 个主题（创建于 https://aka.ms/themedesigner）并且我想在主题之间切换

这是我的首选方式，使用 React Context。

import React from 'react';
import { Fabric, Customizer } from '@fluentui/react';
import { useLocalStorage } from 'react-use';



// Setup Theme Context and create hooks

import {
  DefaultCustomizations,
  DarkCustomizations
} from '@uifabric/theme-samples';

export const ThemeList = {
  light: DefaultCustomizations,
  dark: DarkCustomizations
};

export const ThemeContext = React.createContext({
  theme: 'light',
  changeTheme: name => {}
});

const ThemeWrapper = ({ children }) => {
  return (
    <ThemeContext.Consumer>
      {({ theme }) => (
        <Customizer {...ThemeList[theme]}>
          <Fabric>{children}</Fabric>
        </Customizer>
      )}
    </ThemeContext.Consumer>
  );
};

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useLocalStorage('theme', 'dark');
  const changeTheme = name => ThemeList[name] && setTheme(name);
  const value = { theme, changeTheme };
  return (
    <ThemeContext.Provider value={value}>
      <ThemeWrapper>{children}</ThemeWrapper>
    </ThemeContext.Provider>
  );
};

export const useTheme = () => React.useContext(ThemeContext);



// Now demo how to use it


export function App() {
  const { theme, changeTheme } = useTheme();

  return (
    <button onClick={() => changeTheme('dark')}>
      Switch to dark
    </button>
  );
}

import ReactDOM from 'react-dom';

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

主持人注意：抱歉，这个答案最初是重复的。我删除了重复的。