Skip to content

Commit

Permalink
Merge pull request #2213 from XiaoMi/fix/back-top-style
Browse files Browse the repository at this point in the history 
fix(back-top): 修复 svg 样式被覆盖
  • Loading branch information
@solarjoker
solarjoker authored Aug 29, 2022
2 parents 4d2ded0 + e1c0e4e commit 331f36e
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 45 deletions.
2 changes: 1 addition & 1 deletion packages/ui/back-top/src/styles/back-top.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ $prefix: "#{$component-prefix}-back-top" !default;

@include render-status();

> svg {
> svg[class^=hi-v4-icon] {
width: use-height-size(5);
height: use-height-size(5);
}
Expand Down
17 changes: 6 additions & 11 deletions packages/ui/back-top/stories/basic.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 6 additions & 11 deletions packages/ui/back-top/stories/compose.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 6 additions & 11 deletions packages/ui/back-top/stories/custom.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand All @@ -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>
Expand Down
17 changes: 6 additions & 11 deletions packages/ui/back-top/stories/settings.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 331f36e

Please sign in to comment.