From 840d96eeebabb0aa80d647040b64fa6dcc3daa33 Mon Sep 17 00:00:00 2001
From: xi li <35586469+BBSQQ@users.noreply.github.com>
Date: Tue, 19 Nov 2024 19:18:26 +0800
Subject: [PATCH] fix(text): vis-text use parent container font-size (#13)

* fix(text): vis-text use parent container font-size

* Create rich-horses-look.md

---------

Co-authored-by: lvisei <yunji.me@outlook.com>
---
 .changeset/rich-horses-look.md | 5 +++++
 src/Text/VisText.tsx           | 3 +++
 src/Text/demos/markdown.tsx    | 8 +++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/rich-horses-look.md

diff --git a/.changeset/rich-horses-look.md b/.changeset/rich-horses-look.md
new file mode 100644
index 0000000..7c426f4
--- /dev/null
+++ b/.changeset/rich-horses-look.md
@@ -0,0 +1,5 @@
+---
+'@antv/gpt-vis': patch
+---
+
+fix(text): vis-text use parent container font-size
diff --git a/src/Text/VisText.tsx b/src/Text/VisText.tsx
index f534f6f..b985cc0 100644
--- a/src/Text/VisText.tsx
+++ b/src/Text/VisText.tsx
@@ -29,6 +29,9 @@ const VisText = (props: VisTextProps) => {
       <Text
         className={className}
         style={{
+          // antd Text 组件写死了 14px，在段落定义了 font-size 的情况下，显示很突兀，这里不设置，跟随上级容器字体大小改变。
+          // TODO @羽熙 之后看能否通过 antd ConfigProvider 统一配置
+          fontSize: 'unset',
           ...style,
           ...pick(encoding, ['color', 'backgroundColor', 'fontWeight']),
         }}
diff --git a/src/Text/demos/markdown.tsx b/src/Text/demos/markdown.tsx
index 6718e1f..7ac441c 100644
--- a/src/Text/demos/markdown.tsx
+++ b/src/Text/demos/markdown.tsx
@@ -1,6 +1,12 @@
 import { Bubble, type BubbleProps } from '@ant-design/x';
 import { GPTVis, VisText } from '@antv/gpt-vis';
 import React from 'react';
+import styled from 'styled-components';
+
+const StyledP = styled.p`
+  font-size: 12px;
+  opacity: 0.88;
+`;
 
 const markdownContent = `
 ### 决策数量:
@@ -29,7 +35,7 @@ const bgStyle = {
 };
 
 const RenderMarkdown: BubbleProps['messageRender'] = (content) => (
-  <GPTVis components={{ 'vis-text': VisText }}>{content}</GPTVis>
+  <GPTVis components={{ 'vis-text': VisText, p: StyledP }}>{content}</GPTVis>
 );
 
 export default () => (