@xiangfa/mindmap 0.4.0 → 0.5.0

package/README.md

@@ -140,6 +140,38 @@ In readonly mode, users can still pan, zoom, and select nodes, but cannot create
 <MindMap data={data} theme="light" /> {/* always light */}
 ```
 
+### Custom Styling
+
+Override CSS custom properties on the container to customize colors, fonts, and more:
+
+```css
+/* Override theme variables */
+.mindmap-container {
+  --mindmap-root-bg: #1a73e8;
+  --mindmap-canvas-bg: #f0f4f8;
+  --mindmap-node-text: #1a1a2e;
+}
+```
+
+Target specific elements with semantic CSS classes:
+
+```css
+/* Style all edges */
+.mindmap-edge { stroke-width: 3; }
+
+/* Style root node background */
+.mindmap-node-root .mindmap-node-bg { fill: #6c5ce7; }
+```
+
+Customize individual branch colors via `data-branch-index`:
+
+```css
+.mindmap-edge[data-branch-index="0"] { stroke: #e74c3c; }
+.mindmap-edge[data-branch-index="1"] { stroke: #2ecc71; }
+```
+
+> See [Custom Styling Guide](docs/Custom%20Styling.md) for the full list of 30+ CSS variables, class selectors, and examples.
+
 ### Layout Direction
 
 ```tsx

package/README.zh-CN.md

@@ -140,6 +140,38 @@ const markdown = `
 <MindMap data={data} theme="light" /> {/* 始终亮色 */}
 ```
 
+### 自定义样式
+
+通过覆盖容器上的 CSS 自定义属性来定制颜色、字体等：
+
+```css
+/* 覆盖主题变量 */
+.mindmap-container {
+  --mindmap-root-bg: #1a73e8;
+  --mindmap-canvas-bg: #f0f4f8;
+  --mindmap-node-text: #1a1a2e;
+}
+```
+
+通过语义化 CSS 类选择器定制特定元素：
+
+```css
+/* 定制所有连线 */
+.mindmap-edge { stroke-width: 3; }
+
+/* 定制根节点背景 */
+.mindmap-node-root .mindmap-node-bg { fill: #6c5ce7; }
+```
+
+通过 `data-branch-index` 定制各分支颜色：
+
+```css
+.mindmap-edge[data-branch-index="0"] { stroke: #e74c3c; }
+.mindmap-edge[data-branch-index="1"] { stroke: #2ecc71; }
+```
+
+> 完整的 30+ CSS 变量、class 选择器和示例请参阅 [自定义样式指南](docs/Custom%20Styling.md)。
+
 ### 布局方向
 
 ```tsx

package/dist/components/MindMapContextMenu.d.ts

@@ -17,4 +17,4 @@ export interface MindMapContextMenuProps {
     onDirectionChange: (dir: LayoutDirection) => void;
     onClose: () => void;
 }
-export declare function MindMapContextMenu({ position, theme, messages, readonly: readonlyProp, onNewRootNode, onExportSVG, onExportPNG, onExportMarkdown, onDirectionChange, onClose, }: MindMapContextMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MindMapContextMenu({ position, messages, readonly: readonlyProp, onNewRootNode, onExportSVG, onExportPNG, onExportMarkdown, onDirectionChange, onClose, }: MindMapContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MindMapControls.d.ts

@@ -13,4 +13,4 @@ export interface MindMapControlsProps {
     onModeToggle: () => void;
     onFullscreenToggle: () => void;
 }
-export declare function MindMapControls({ zoom, theme, messages, showZoom, mode, isFullscreen, onZoomIn, onZoomOut, onAutoFit, onModeToggle, onFullscreenToggle, }: MindMapControlsProps): import("react/jsx-runtime").JSX.Element;
+export declare function MindMapControls({ zoom, messages, showZoom, mode, isFullscreen, onZoomIn, onZoomOut, onAutoFit, onModeToggle, onFullscreenToggle, }: MindMapControlsProps): import("react/jsx-runtime").JSX.Element;