text: import * as React from 'react';
  import PropTypes from 'prop-types';
  import Head from 'next/head';
  import { ThemeProvider } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  import { CacheProvider } from '@emotion/react';
  import theme from '../src/theme';
  import createEmotionCache from '../src/createEmotionCache';
  
  const clientSideEmotionCache = createEmotionCache();
  
  export default function MyApp(props) {
    const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  
    return (
      <CacheProvider value={emotionCache}>
        <Head>
          <title>Bee</title>
          <meta name="viewport" content="initial-scale=1, width=device-width" />
        </Head>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </CacheProvider>
    );
  }
  
  MyApp.propTypes = {
    Component: PropTypes.elementType.isRequired,
    emotionCache: PropTypes.object,
    pageProps: PropTypes.object.isRequired,
  };
  