Adding Material UI to Docusaurus

One great thing about Docusaurus, is it's built with React. That means I can use any other npm packages that would normally be used in a react app when building out my documentation / blog.

I'm not the best UI person, so it's nice to use some pre-made components that already look nice. Depending on the project, I tend to switch between Material UI and FluentUI and, for this site, I decided to go with the former

You can use Material UI as-is, but most of the time you want to have a custom theme and colors, so it took some research to figure out how to go about it.

Swizzle Root​

Since we want the theme to apply to everything, the first thing we need to do is swizzle the entire site using Root.js. The documentation on it is here, but essentially we just make a Root.js file inside of the theme folder.

src
  - components
  - css
  - pages
  - theme
    Root.js

import React from "react";

// Default implementation, that you can customize
export default function Root({ children }) {
  return <>{children}</>;
}

I decided to go one step further and make an App component. My reasoning for this was that all of the contexts and state can be setup inside of Root.js, and then I can utilize them within App when it initializes.

This changed my Root.js to look like the following:

import React from "react";

import App from "@site/src/components/App/index";

export default function Root({ children }) {
  return (
    <> <App children={children}> </>
  )
}

And App looks like this

import React from "react";

export default function App(props: any): JSX.Element {
  return <React.Fragment>{props.children}</React.Fragment>;
}

Install Material UI​

Before we can set anything up, we need to install Material UI. That can be done with

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

Define a Theme​

Setting up a basic color theme with Material UI can be done through createTheme() and ThemeProvider. This would be a good place to setup a Redux store or SnackbarProvider as well.

import React from "react";
import { ThemeProvider, createTheme } from "@mui/material/styles";

import App from "@site/src/components/App/index";

const theme = createTheme({
  palette: {
    primary: {
      main: "",
      light: "",
      dark: "",
    },
    secondary: {
      main: "",
      light: "",
      dark: "",
    },
  },
});

export default function Root({ children }) {
  return (
    <>
      <ThemeProvider theme={theme}>
        <App children={children}>
      </ThemeProvider>
    </>
  )
}

Utilize Material UI​

Now that we have the theme provider setup, all of our Material UI components should have the correct theme / colors. 🙂