覆盖 CSS

BlockNote 提供了多种通过 CSS 自定义编辑器外观的方法。你可以使用 CSS 类和属性来覆盖默认样式。

基本示例

在下面的演示中，我们创建了额外的 CSS 规则，使编辑器文本和鼠标悬停时的斜杠菜单项变为蓝色：

import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import "./styles.css";export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: "You'll see that the text is now blue",      },      {        type: "paragraph",        content:          "Press the '/' key - the hovered Slash Menu items are also blue",      },    ],  });  // 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 />;}

/* Adds border and shadow to editor */.bn-root[data-theming-css-demo] .bn-editor * {  color: blue;}/* Makes slash menu hovered items blue */.bn-root[data-theming-css-demo] .bn-suggestion-menu-item[aria-selected="true"],.bn-root[data-theming-css-demo] .bn-suggestion-menu-item:hover {  background-color: blue;}

/// <reference types="vite-plus/client" />

CSS 选择器参考

BlockNote CSS 类

BlockNote 使用带有 bn- 前缀的类来为编辑器元素添加样式。以下是你可以针对的主要类：

编辑器结构

.bn-root: 编辑器或 portal UI 的主题根元素。一个编辑器可以有多个根元素。
.bn-container: 围绕 .bn-editor 的容器
.bn-editor: 主编辑器元素（可编辑区域）
.bn-block: 单个块元素（包括嵌套块）
.bn-block-group: 嵌套块的容器
.bn-block-content: 块内容包装器
.bn-inline-content: 块的可编辑富文本内容

UI 组件

.bn-toolbar：格式化和链接工具栏。
.bn-side-menu：侧边菜单元素。
.bn-drag-handle-menu：拖拽手柄菜单。
.bn-suggestion-menu：建议菜单。

菜单和弹出框可能会 portal 到打开它们的工具栏或按钮之外。请在 .bn-root 下针对它们自己的类，而不要依赖工具栏或 .bn-container 祖先元素。请参阅配置 Portal 目标。

BlockNote CSS 属性

BlockNote 使用数据属性来针对特定的块类型和属性：

[data-content-type="blockType"]：针对类型为 blockType 的块。
[data-propName="propValue"]：针对具有特定属性值的块。如果该值与默认值相同，则不会添加 data-propName 属性。

import "@blocknote/core/fonts/inter.css"; import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import "./styles.css"; export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ initialContent: [ { type: "paragraph", content: "Welcome to this demo!", }, { type: "paragraph", content: "You'll see that the text is now blue", }, { type: "paragraph", content: "Press the '/' key - the hovered Slash Menu items are also blue", }, ], }); // 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 />; }

import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import "./styles.css";export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ initialContent: [ { type: "paragraph", content: "Welcome to this demo!", }, { type: "paragraph", content: "You'll see that the text is now blue", }, { type: "paragraph", content: "Press the '/' key - the hovered Slash Menu items are also blue", }, ], }); // 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 />;}

/* Adds border and shadow to editor */ .bn-root[data-theming-css-demo] .bn-editor * { color: blue; } /* Makes slash menu hovered items blue */ .bn-root[data-theming-css-demo] .bn-suggestion-menu-item[aria-selected="true"], .bn-root[data-theming-css-demo] .bn-suggestion-menu-item:hover { background-color: blue; }

/* Adds border and shadow to editor */.bn-root[data-theming-css-demo] .bn-editor * { color: blue;}/* Makes slash menu hovered items blue */.bn-root[data-theming-css-demo] .bn-suggestion-menu-item[aria-selected="true"],.bn-root[data-theming-css-demo] .bn-suggestion-menu-item:hover { background-color: blue;}