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 <[email protected]>
antvis · Nov 19, 2024 · 840d96e · 840d96e
1 parent 2609e08
commit 840d96e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/rich-horses-look.md 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
@@ -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
@@ -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 () => (