fix(back-top): 修复 svg 样式被覆盖

XiaoMi · Aug 29, 2022 · 2b8f3bd · 2b8f3bd
1 parent 4d2ded0
commit 2b8f3bd
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 50 deletions.
diff --git a/packages/ui/back-top/src/BackTop.tsx b/packages/ui/back-top/src/BackTop.tsx
@@ -91,7 +91,12 @@ export const BackTop = forwardRef<HTMLDivElement | null, BackTopProps>(
       <div ref={ref} role={role} className={cls} onClick={handleClick} {...rest}>
         {children || (
           <div className={contentCls}>
-            <ArrowUpOutlined />
+            <ArrowUpOutlined
+              style={{
+                width: 'var(--hi-v4-height-5, 20px)',
+                height: 'var(--hi-v4-height-5, 20px)',
+              }}
+            />
           </div>
         )}
       </div>

diff --git a/packages/ui/back-top/src/styles/back-top.scss b/packages/ui/back-top/src/styles/back-top.scss
@@ -45,10 +45,5 @@ $prefix: "#{$component-prefix}-back-top" !default;
     }
 
     @include render-status();
-
-    > svg {
-      width: use-height-size(5);
-      height: use-height-size(5);
-    }
   }
 }
diff --git a/packages/ui/back-top/stories/basic.stories.tsx b/packages/ui/back-top/stories/basic.stories.tsx
@@ -13,22 +13,17 @@ export const Basic = () => {
         <div style={{ position: 'relative', height: 400 }}>
           <BackTop
             style={{ position: 'absolute' }}
-            container={() => document.getElementById('back-top_target') as HTMLElement}
+            container={() => document.getElementById('back-top_target')}
           />
           <div
             id="back-top_target"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>

diff --git a/packages/ui/back-top/stories/compose.stories.tsx b/packages/ui/back-top/stories/compose.stories.tsx
@@ -58,22 +58,17 @@ export const Compose = () => {
           <BackTop
             shape="circle"
             style={{ position: 'absolute' }}
-            container={() => document.getElementById('back-top_compose') as HTMLElement}
+            container={() => document.getElementById('back-top_compose')}
           />
           <div
             id="back-top_compose"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>

diff --git a/packages/ui/back-top/stories/custom.stories.tsx b/packages/ui/back-top/stories/custom.stories.tsx
@@ -17,7 +17,7 @@ export const Custom = () => {
           <Tooltip title="回到顶部" placement="left">
             <BackTop
               style={{ position: 'absolute', right: 50, bottom: 112 }}
-              container={() => document.getElementById('back-top_custom') as HTMLElement}
+              container={() => document.getElementById('back-top_custom')}
             >
               <div
                 style={{
@@ -39,16 +39,11 @@ export const Custom = () => {
             id="back-top_custom"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>

diff --git a/packages/ui/back-top/stories/settings.stories.tsx b/packages/ui/back-top/stories/settings.stories.tsx
@@ -48,22 +48,17 @@ export const Settings = () => {
             duration={duration}
             visibleHeight={visibleHeight}
             style={{ position: 'absolute' }}
-            container={() => document.getElementById('back-top_setting') as HTMLElement}
+            container={() => document.getElementById('back-top_setting')}
           />
           <div
             id="back-top_setting"
             style={{ position: 'relative', height: 400, overflowY: 'scroll' }}
           >
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容1</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容2</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容3</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容4</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容5</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容6</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容7</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容8</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容9</div>
-            <div style={{ padding: 30, background: '#f3f2f9' }}>页面内容10</div>
+            {Array.from({ length: 10 }, (_, index) => (
+              <div key={index} style={{ padding: 30, background: '#f2f3f7' }}>
+                页面内容{index}
+              </div>
+            ))}
           </div>
         </div>
       </div>