zl365/src/App.tsx

import React, { Component, createContext, useContext, useEffect, useState } from "react";
import "./App.css";
// import List from "./component/List";
import Header from './component/hedaer';
import Bar from './component/bar';
import Content from './component/content';
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import eventBus from './bus';

const App = () => {
  const [themeInfo , setInfo] = useState(webLightTheme)
  useEffect(()=>{
    const handleCustomEvent = (data:any) => {
      setInfo(data);
    };

    eventBus.on('themechange', handleCustomEvent);

    return () => {
      eventBus.off('themechange', handleCustomEvent);
    };
  })
  return (
      <FluentProvider theme={themeInfo}>
        <div className="zl-365-container">
          <Header></Header>
          <Bar></Bar>
          <Content></Content>
        </div>
      </FluentProvider>
  );
}
export default App;