@emotion/react#Global JavaScript Examples

function App() {
  return (
     <ThemeProvider theme={darkMode}>
        <Global styles={globalCss}/>
        <TitleBar/>
        <Clock/>
        <Prompts/>
    </ThemeProvider>
    );
}

MyGlobals = () => (
  <div>
    <Global
      styles={css`
        body {
          background: red;
        }
      `}
    />
    <GlobalStyles />
  </div>
)

GlobalStyle = ({ children }) => {
  const { colorMode } = useColorMode()

  return (
    <>
      <Global
        styles={css`
          ${colorMode === 'light' ? prismLightTheme : prismDarkTheme};
          html {
            min-width: 356px;
            scroll-behavior: smooth;
          }
          #__next {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background: ${colorMode === 'light' ? 'white' : '#15161a'};
          }
        `}
      />
      {children}
    </>
  )
}

AppLayout = ({ children }) => {
  const { colors } = useThemeContext();

  return (
    <>
      <Global styles={[globalStyle(colors)]} />
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

GlobalStyles = () => {
  const [colorMode] = useColorMode();
  const theme = useTheme();
  const backgroundColor = {
    light: 'white',
    dark: 'gray:100',
  }[colorMode];
  const color = {
    light: 'black:primary',
    dark: 'white:primary',
  }[colorMode];

  return (
    <Global
      styles={css`
        :root {
          color-scheme: ${colorMode};
        }
        :focus:not(.focus-visible) {
          outline: none;
        }
        body {
          background-color: ${theme.colors[backgroundColor]};
          color: ${theme.colors[color]};
          font-size: ${theme.fontSizes.sm};
          line-height: ${theme.lineHeights.sm};
        }
      `}
    />
  );
}

CSSBaseline = () => {
  return (
    <Global styles={globalStyles} />
  );
}

Layout = ({ children, location, pageResources, ...props }) => {
  const path = location.pathname;
  function getPrevNextRoutes(routes) {
    const validRoutes = flatten(createTree(processRoutes(routes, path)));

    const currentPathIndex = validRoutes.findIndex(
      route => route.slug === path
    );

    return {
      prev: validRoutes[currentPathIndex - 1],
      next: validRoutes[currentPathIndex + 1],
    };
  }

  // HACK: remove this if the plugin can somehow work by default...
  // Fixes the anchor not being scrolled to on page load
  useLayoutEffect(anchorScroll, []);

  return (
    <MDXProvider components={components}>
      <Global
        styles={css`
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            color: #f4e0f1;
            font-weight: bold;
          }

          h1 {
            font-size: 40px;
            margin-top: 20px;
            padding-top: 20px;
            line-height: 1.1;
          }

          h2 {
            font-size: 32px;
            line-height: 1.3;
          }

          h3 {
            font-size: 24px;
            margin-bottom: 10px;
            margin-top: 40px;
          }

          h4 {
            font-size: 20px;
            margin-bottom: 10px;
          }

          h5 {
            font-size: 18px;
          }

          h2::before {
            content: ' ';
            display: block;
            border-bottom: 1px solid #44395d;
            padding-top: 20px;
            margin-bottom: 40px;
          }

          blockquote {
            margin: 0;
            padding: 0.5em 30px;
            border-radius: 0px 10px 10px 0px;
            background-color: rgba(135, 82, 27, 0.25);
            color: #ddc5a1;
            border-left: 2px dashed #ddc5a1;
          }

          h3 > code[class*='language-'] {
            color: #ffe69d;
          }

          ul {
            padding-left: 20px;
          }

          li {
            margin-bottom: 5px;
          }

          a {
            color: #ffe69d;
            text-decoration: none;
            padding-bottom: 1px;
            border-bottom: 2px solid rgba(255, 228, 148, 0.25);
            transition: border-bottom-color 0.15s ease-in-out;

            &:hover {
              border-bottom: 2px solid rgba(255, 228, 148, 1);
            }

            &:active {
              border-bottom-style: dashed;
            }
          }

          ${media.md} {
            pre[class*='language-'] {
              padding: 15px 20px;
            }
          }

          h1 .gatsby-link-icon {
            display: none;
          }

          h2,
          h3,
          h4,
          h5,
          h6 {
            &:hover {
              .gatsby-link-icon {
                opacity: 1;
              }
            }
          }

          .gatsby-link-icon {
            fill: #ffb6b3;
            border: none;
            margin-left: -30px;
            padding-right: 10px;
            opacity: 0;
            transition: opacity 0.15s ease-in-out;
            float: right;

            ${media.md} {
              float: left;
            }

            &:focus {
              opacity: 1;
            }

            &:hover {
              border: none;
            }

            svg {
              width: 20px;
              height: 20px;
            }
          }
        `}
      />
      <div>
        {pageResources && (
          <SEO
            title={
              pageResources.json.pageContext.frontmatter.title ||
              pageResources.json.pageContext.frontmatter.navigationLabel
            }
          />
        )}
        <Navigation root="/" target="location" path={path} />
        <Main>
          <Container>
            {children}
            <EditPage path={path} />
          </Container>
          <MdxRoutes>
            {routes => {
              const { prev, next } = getPrevNextRoutes(routes);
              return (
                <NavButtonWrapper>
                  <NavButtonContainer>
                    <NavButtonCell>
                      {prev && (
                        <NavButton to={`${prev.slug}`} data-first>
                          <NavButtonDirection data-prev>
                            <ChevronLeft size={28} css={arrowCss} />
                          </NavButtonDirection>
                          {prev.navigationLabel}
                        </NavButton>
                      )}
                    </NavButtonCell>
                    <NavDivider />
                    <NavButtonCell>
                      {next && (
                        <NavButton to={`${next.slug}`} data-last>
                          {next.navigationLabel}
                          <NavButtonDirection data-next>
                            <ChevronRight size={28} css={arrowCss} />
                          </NavButtonDirection>
                        </NavButton>
                      )}
                    </NavButtonCell>
                  </NavButtonContainer>
                </NavButtonWrapper>
              );
            }}
          </MdxRoutes>
        </Main>
        <FooterStyled>© {new Date().getFullYear()} MIT License</FooterStyled>
      </div>
    </MDXProvider>
  );
}

Search = () => (
  <Fragment>
    <Global
      styles={css`
        :root {
          --docsearch-primary-color: #ff6b81;
          --docsearch-text-color: #000;
          --docsearch-container-background: rgba(9, 10, 17, 0.8);
          --docsearch-modal-background: #281e36;
          --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
            0 3px 8px 0 rgb(0, 3, 9);
          --docsearch-searchbox-background: rgb(9, 10, 17);
          --docsearch-searchbox-focus-background: #fff;
          --docsearch-hit-color: rgb(190, 195, 201);
          --docsearch-hit-shadow: none;
          --docsearch-hit-background: #30263d;
          --docsearch-key-gradient: linear-gradient(
            -26.5deg,
            var(--docsearch-modal-background) 0%,
            rgb(65 46 80) 100%
          );
          --docsearch-key-shadow: inset 0 -2px 0 0 rgb(81 31 82),
            inset 0 0 1px 1px rgb(125 81 111), 0 2px 2px 0 rgba(3, 4, 9, 0.5);
          --docsearch-footer-background: #2f263c;
          --docsearch-footer-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
          --docsearch-logo-color: #fff;
          --docsearch-muted-color: rgb(127, 132, 151);

          .DocSearch-Form {
            --docsearch-searchbox-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
          }

          .DocSearch-Button {
            --docsearch-searchbox-background: rgb(235, 237, 240);
            --docsearch-searchbox-focus-background: #fff;
            --docsearch-text-color: rgb(28, 30, 33);
            --docsearch-muted-color: rgb(117 124 138);
            --docsearch-key-gradient: linear-gradient(
              -225deg,
              rgb(213, 219, 228) 0%,
              rgb(248, 248, 248) 100%
            );
            --docsearch-searchbox-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
            --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
              inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
          }
        }

        .DocSearch-Button {
          margin: 10px;
          height: 39px;
        }

        .DocSearch-Button-Placeholder {
          width: 100%;
          text-align: left;
        }

        .DocSearch-Search-Icon {
          width: 28px;
        }

        .DocSearch-Modal {
          a {
            border-bottom-style: none;
          }
          li {
            margin-bottom: 0;
          }
          .DocSearch-Commands-Key {
            padding-bottom: 1px;
          }
        }

        @media (max-width: 750px) {
          .DocSearch-Button-KeySeparator,
          .DocSearch-Button-Key {
            display: flex;
          }

          .DocSearch-Button-Placeholder {
            display: flex;
          }
        }
      `}
    />
    <DocSearch
      apiKey="ccecbe8791b41f321a9f1de2f70fab85"
      indexName="popper"
      appId="INT10183JB"
      navigator={{
        navigate({ suggestionUrl }) {
          navigate(suggestionUrl);
        },
      }}
      hitComponent={Hit}
      transformItems={(items) => {
        return items.map((item) => {
          // We transform the absolute URL into a relative URL to
          // leverage Gatsby's preloading.
          const a = document.createElement('a');
          a.href = item.url;

          return {
            ...item,
            url: `${a.pathname}${a.hash}`,
          };
        });
      }}
    />
  </Fragment>
)

CodeBlock = ({
  /**
   * Do not evaluate and mount the inline code (Default: `false`).
   */
  noInline = false,

  /**
   * Disable editing on the `<LiveEditor />` (Default: `false`)
   */
  disabled = false,

  /**
   * Preview only (Default: `false`)
   */
  previewOnly = false,

  /**
   * Default is expand or collapse (Default: `false`)
   */
  expanded: defaultExpanded = false,

  className,
  children,
  ...props
}) => {
  const [, updateState] = useState();
  const forceUpdate = useCallback(() => updateState({}), []);
  const [colorMode] = useColorMode();
  const [editorCode, setEditorCode] = useState(children.trim());
  const {
    onCopy: copySource,
    hasCopied: hasCopiedSource,
  } = useClipboard(editorCode);
  const [isLiveEditorVisible, toggleLiveEditorVisibility] = reactHooks.useToggle(defaultExpanded);
  const resetDemo = () => {
    setEditorCode(children.trim());
    toggleLiveEditorVisibility(false);
    forceUpdate();
  };
  const handleLiveEditorChange = useCallback(newCode => {
    setEditorCode(newCode.trim());
  }, []);
  const language = className && className.replace(/language-/, '');

  noInline = boolean(noInline);

  if (disabled === undefined) {
    disabled = (language !== 'jsx');
  } else {
    disabled = (language !== 'jsx') || boolean(disabled);
  }

  const liveProviderProps = {
    theme: {
      dark: codeBlockDark,
      light: codeBlockLight,
    }[colorMode],
    language,
    noInline,
    disabled,
    code: editorCode,
    transformCode: code => code,
    scope: {
      ...reactComponents,
      ...reactLabComponents,
      ...reactHooks,
      ...thirdPartyComponents,
      Code,
      FontAwesomeIcon,
      InputTag,
      Lorem,
      SkeletonBody,
      SkeletonContent,
      Global, // from '@emotion/react'
      css, // from '@emotion/react'
      mdx, // from '@mdx-js/react'
      sx, // from '@tonic-ui/styled-system'
      tmicons, // from '@trendmicro/tmicon'
    },
    mountStylesheet: false,
    ...props,
  };

  if (previewOnly) {
    return (
      <LiveProvider {...liveProviderProps}>
        <LiveCodePreview style={liveCodePreviewStyle} />
      </LiveProvider>
    );
  }

  const isEditable = !disabled;

  if (!isEditable) {
    return (
      <LiveProvider {...liveProviderProps}>
        <LiveEditor
          style={liveEditorStyle}
          css={css`
            & > textarea { outline: 0; }
          `}
        />
      </LiveProvider>
    );
  }

  return (
    <LiveProvider {...liveProviderProps}>
      <LiveCodePreview style={liveCodePreviewStyle} />
      <Box display="flex" justifyContent="flex-end">
        <IconButton onClick={toggleLiveEditorVisibility}>
          <Tooltip label={isLiveEditorVisible ? 'Hide the source' : 'Show the source'}>
            <Icon icon="code" size={{ sm: '5x', md: '4x' }} />
          </Tooltip>
        </IconButton>
        <IconButton onClick={copySource}>
          <Tooltip label={hasCopiedSource ? 'Copied' : 'Copy the source'}>
            <Icon icon="file-copy-o" size={{ sm: '5x', md: '4x' }} />
          </Tooltip>
        </IconButton>
        <IconButton onClick={resetDemo}>
          <Tooltip label="Reset the demo">
            <Icon icon="redo" size={{ sm: '5x', md: '4x' }} />
          </Tooltip>
        </IconButton>
      </Box>
      <Fade in={isLiveEditorVisible}>
        <Collapse in={isLiveEditorVisible} unmountOnExit={true}>
          <LiveEditor
            onChange={handleLiveEditorChange}
            style={liveEditorStyle}
            css={css`
              & > textarea { outline: 0; }
            `}
          />
        </Collapse>
      </Fade>
      <LiveError style={liveErrorStyle} />
    </LiveProvider>
  );
}