refactor: pass style overrides to renderSvgInShadowHost

src/renderer/src/components/Preview/GraphvizPreview.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { useDebouncedRender } from './hooks/useDebouncedRender'
 import ImagePreviewLayout from './ImagePreviewLayout'
+import { PreviewHostCssWhite } from './styles'
 import { BasicPreviewHandles, BasicPreviewProps } from './types'
 import { renderSvgInShadowHost } from './utils'
 
@@ -25,7 +26,7 @@ const GraphvizPreview = ({
   const renderGraphviz = useCallback(async (content: string, container: HTMLDivElement) => {
     const viz = await vizInitializer.get()
     const svg = viz.renderString(content, { format: 'svg' })
-    renderSvgInShadowHost(svg, container)
+    renderSvgInShadowHost(svg, container, { hostCss: PreviewHostCssWhite })
   }, [])
 
   // 使用预览渲染器 hook

src/renderer/src/components/Preview/PlantUmlPreview.tsx

@@ -4,6 +4,7 @@ import React, { memo, useCallback, useEffect } from 'react'
 
 import { useDebouncedRender } from './hooks/useDebouncedRender'
 import ImagePreviewLayout from './ImagePreviewLayout'
+import { PreviewHostCssWhite } from './styles'
 import { BasicPreviewHandles, BasicPreviewProps } from './types'
 import { renderSvgInShadowHost } from './utils'
 
@@ -103,7 +104,7 @@ const PlantUmlPreview = ({
     }
 
     const text = await response.text()
-    renderSvgInShadowHost(text, container)
+    renderSvgInShadowHost(text, container, { hostCss: PreviewHostCssWhite })
   }, [])
 
   // 使用预览渲染器 hook

src/renderer/src/components/Preview/SvgPreview.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback } from 'react'
 
 import { useDebouncedRender } from './hooks/useDebouncedRender'
 import ImagePreviewLayout from './ImagePreviewLayout'
+import { PreviewHostCssWhite } from './styles'
 import { BasicPreviewHandles } from './types'
 import { renderSvgInShadowHost } from './utils'
 
@@ -18,7 +19,7 @@ interface SvgPreviewProps {
 const SvgPreview = ({ children, enableToolbar = false, className, ref }: SvgPreviewProps) => {
   // 定义渲染函数
   const renderSvg = useCallback(async (content: string, container: HTMLDivElement) => {
-    renderSvgInShadowHost(content, container)
+    renderSvgInShadowHost(content, container, { hostCss: PreviewHostCssWhite })
   }, [])
 
   // 使用预览渲染器 hook

src/renderer/src/components/Preview/styles.ts

@@ -33,3 +33,9 @@ export const PreviewContainer = styled(Flex).attrs({ role: 'alert' })`
     }
   }
 `
+
+export const PreviewHostCssWhite = `
+  background-color: white;
+  border: 0.5px solid var(--color-code-background);
+  border-radius: 8px;
+`

src/renderer/src/components/Preview/utils.ts

@@ -1,3 +1,7 @@
+type ShadowHostOptions = {
+  hostCss?: string // override :host styles
+}
+
 /**
  * Renders an SVG string inside a host element's Shadow DOM to ensure style encapsulation.
  * This function handles creating the shadow root, injecting base styles for the host,
@@ -7,7 +11,7 @@
  * @param hostElement The container element that will host the Shadow DOM.
  * @throws An error if the SVG content is invalid or cannot be parsed.
  */
-export function renderSvgInShadowHost(svgContent: string, hostElement: HTMLElement): void {
+export function renderSvgInShadowHost(svgContent: string, hostElement: HTMLElement, options?: ShadowHostOptions): void {
   if (!hostElement) {
     throw new Error('Host element for SVG rendering is not available.')
   }
@@ -15,14 +19,10 @@ export function renderSvgInShadowHost(svgContent: string, hostElement: HTMLEleme
   const shadowRoot = hostElement.shadowRoot || hostElement.attachShadow({ mode: 'open' })
 
   // Base styles for the host element
-  const style = document.createElement('style')
+  const base = `
-  style.textContent = `
     :host {
       padding: 1em;
-      background-color: white;
       overflow: auto;
-      border: 0.5px solid var(--color-code-background);
-      border-radius: 8px;
       display: block;
       position: relative;
       width: 100%;
@@ -34,6 +34,9 @@ export function renderSvgInShadowHost(svgContent: string, hostElement: HTMLEleme
     }
   `
 
+  const style = document.createElement('style')
+  style.textContent = base + (options?.hostCss ? `\n${options.hostCss}\n` : '')
+
   // Clear previous content and append new style and SVG
   shadowRoot.innerHTML = ''
   shadowRoot.appendChild(style)