diff --git a/src/renderer/src/components/Preview/GraphvizPreview.tsx b/src/renderer/src/components/Preview/GraphvizPreview.tsx
index 77a7448ab2..ab1338bac3 100644
--- a/src/renderer/src/components/Preview/GraphvizPreview.tsx
+++ b/src/renderer/src/components/Preview/GraphvizPreview.tsx
@@ -28,7 +28,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, { hostCss: PreviewHostCssWhite })
+    renderSvgInShadowHost(svg, container, { customCss: PreviewHostCssWhite })
   }, [])
 
   // 使用预览渲染器 hook
diff --git a/src/renderer/src/components/Preview/PlantUmlPreview.tsx b/src/renderer/src/components/Preview/PlantUmlPreview.tsx
index 1c9b3afad4..6a1aed514c 100644
--- a/src/renderer/src/components/Preview/PlantUmlPreview.tsx
+++ b/src/renderer/src/components/Preview/PlantUmlPreview.tsx
@@ -104,7 +104,7 @@ const PlantUmlPreview = ({
     }
 
     const text = await response.text()
-    renderSvgInShadowHost(text, container, { hostCss: PreviewHostCssWhite })
+    renderSvgInShadowHost(text, container, { customCss: PreviewHostCssWhite })
   }, [])
 
   // 使用预览渲染器 hook
diff --git a/src/renderer/src/components/Preview/SvgPreview.tsx b/src/renderer/src/components/Preview/SvgPreview.tsx
index f22337c323..bc2351e7a3 100644
--- a/src/renderer/src/components/Preview/SvgPreview.tsx
+++ b/src/renderer/src/components/Preview/SvgPreview.tsx
@@ -19,7 +19,7 @@ interface SvgPreviewProps {
 const SvgPreview = ({ children, enableToolbar = false, className, ref }: SvgPreviewProps) => {
   // 定义渲染函数
   const renderSvg = useCallback(async (content: string, container: HTMLDivElement) => {
-    renderSvgInShadowHost(content, container, { hostCss: PreviewHostCssWhite })
+    renderSvgInShadowHost(content, container, { customCss: PreviewHostCssWhite })
   }, [])
 
   // 使用预览渲染器 hook
diff --git a/src/renderer/src/components/Preview/styles.ts b/src/renderer/src/components/Preview/styles.ts
index 3268047033..73cb5f56a8 100644
--- a/src/renderer/src/components/Preview/styles.ts
+++ b/src/renderer/src/components/Preview/styles.ts
@@ -35,7 +35,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;
+  :host {
+    background-color: white;
+    border: 0.5px solid var(--color-code-background);
+    border-radius: 8px;
+  }
 `
diff --git a/src/renderer/src/components/Preview/utils.ts b/src/renderer/src/components/Preview/utils.ts
index b460e0a867..fa6b8bfe1a 100644
--- a/src/renderer/src/components/Preview/utils.ts
+++ b/src/renderer/src/components/Preview/utils.ts
@@ -1,5 +1,5 @@
 type ShadowHostOptions = {
-  hostCss?: string // override :host styles
+  customCss?: string // override styles
 }
 
 /**
@@ -35,7 +35,7 @@ export function renderSvgInShadowHost(svgContent: string, hostElement: HTMLEleme
   `
 
   const style = document.createElement('style')
-  style.textContent = base + (options?.hostCss ? `\n${options.hostCss}\n` : '')
+  style.textContent = base + (options?.customCss ? `\n${options.customCss}\n` : '')
 
   // Clear previous content and append new style and SVG
   shadowRoot.innerHTML = ''