← Back
baseweb blitzjs react

Using baseui with blitzjs

The baseweb recipe of blitz fails, so I have to create files manually:

First setup styletron:

utils/styletron.ts:

import { Client, Server } from "styletron-engine-atomic";
import { DebugEngine } from "styletron-react";

const getHydrateClass = () =>
  document.getElementsByClassName("_styletron_hydrate_");

export const styletron =
  typeof window === "undefined"
    ? new Server()
    : new Client({
        hydrate: getHydrateClass(),
      });

export const debug =
  process.env.NODE_ENV === "production" ? void 0 : new DebugEngine();

Then change the App:

import { AppProps, ErrorComponent, useRouter } from "blitz";
import { ErrorBoundary, FallbackProps } from "react-error-boundary";
import { styletron } from "utils/styletron";
import { Provider as StyletronProvider } from "styletron-react";
import { DarkTheme, BaseProvider, styled } from "baseui";

const Centered = styled("div", {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});

export default function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || ((page) => page);
  const router = useRouter();

  return (
    <ErrorBoundary>
      <StyletronProvider value={styletron}>
        <BaseProvider theme={DarkTheme}>
          <Centered>{getLayout(<Component {...pageProps} />)}</Centered>
        </BaseProvider>
      </StyletronProvider>
    </ErrorBoundary>
  );
}

References #