Overriding CSS

You can change any styles applied to the editor by adding your own CSS rules. If you just want to quickly change the basic look of the editor, Themes might be more useful.

In the demo below, we create additional CSS rules to add some simple styling to the editor, and also make all hovered slash menu items blue:

import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";
 
import "./styles.css";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();
  // Renders the editor instance using a React component.
  // Adds `data-theming-css-demo` to restrict styles to only this demo.
  return <BlockNoteView editor={editor} data-theming-css-demo />;
}

Themes Adding DOM Attributes