You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/docs/react/styling-theming/overriding-css.mdx
+12-14Lines changed: 12 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,25 +23,23 @@ BlockNote uses classes with the `bn-` prefix to style editor elements. Here are
23
23
24
24
#### Editor Structure
25
25
26
-
-`.bn-container`: Container for editor and all menus/toolbars
27
-
-`.bn-editor`: Main editor element
28
-
-`.bn-block`: Individual block element (including nested)
29
-
-`.bn-block-group`: Container for nested blocks
30
-
-`.bn-block-content`: Block content wrapper
31
-
-`.bn-inline-content`: Block's editable rich text content
26
+
-`.bn-container`: Container for editor and all menus/toolbars.
27
+
-`.bn-editor`: Main editor element.
28
+
-`.bn-block`: Individual block element (including nested).
29
+
-`.bn-block-group`: Container for nested blocks.
30
+
-`.bn-block-content`: Block content wrapper.
31
+
-`.bn-inline-content`: Block's editable rich text content.
32
32
33
33
#### UI Components
34
34
35
-
-`.bn-toolbar`: Formatting & link toolbars
36
-
-`.bn-side-menu`: Side menu element
37
-
-`.bn-drag-handle-menu`: Drag handle menu
38
-
-`.bn-suggestion-menu`: Suggestion menu
35
+
-`.bn-toolbar`: Formatting & link toolbars.
36
+
-`.bn-side-menu`: Side menu element.
37
+
-`.bn-drag-handle-menu`: Drag handle menu.
38
+
-`.bn-suggestion-menu`: Suggestion menu.
39
39
40
40
### BlockNote CSS Attributes
41
41
42
42
BlockNote uses data attributes to target specific block types and properties:
43
43
44
-
-`[data-content-type="blockType"]`: Targets blocks of type `blockType`
45
-
-`[data-propName="propValue"]`: Targets blocks with specific prop values
46
-
47
-
Example:
44
+
-`[data-content-type="blockType"]`: Targets blocks of type `blockType`.
45
+
-`[data-propName="propValue"]`: Targets blocks with specific prop values. If the value is the same as the default value, the `data-propName` attribute will not be added.
0 commit comments