From 21d4f7519c3e76fa0e65c3bd929df84cfce0150c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Tue, 18 Jun 2019 14:37:24 +0800
Subject: [PATCH] fix: fix CopyBlock style warning

---
 src/components/CopyBlock/index.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/CopyBlock/index.tsx b/src/components/CopyBlock/index.tsx
index 2292078e..9ee05ae8 100644
--- a/src/components/CopyBlock/index.tsx
+++ b/src/components/CopyBlock/index.tsx
@@ -1,7 +1,7 @@
 import { Icon, Popover, Typography } from 'antd';
 
 import { FormattedMessage } from 'umi-plugin-react/locale';
-import React from 'react';
+import React, { useRef } from 'react';
 import { connect } from 'dva';
 import { isAntDesignPro } from '@/utils/utils';
 import styles from './index.less';
@@ -41,8 +41,13 @@ const BlockCodeView: React.SFC<{
           text: blockUrl,
           onCopy: () => onBlockCopy(url),
         }}
+        style={{
+          display: 'flex',
+        }}
       >
-        <code className={styles['copy-block-code']}>{blockUrl}</code>
+        <pre>
+          <code className={styles['copy-block-code']}>{blockUrl}</code>
+        </pre>
       </Typography.Paragraph>
     </div>
   );
@@ -58,14 +63,16 @@ export default connect(({ routing }: { routing: RoutingType }) => ({
   location: routing.location,
 }))(({ location }: RoutingType) => {
   const url = location.pathname;
+  const divDom = useRef<HTMLDivElement>(null);
   return (
     <Popover
       title={<FormattedMessage id="app.preview.down.block" defaultMessage="下载此页面到本地项目" />}
       placement="topLeft"
       content={<BlockCodeView url={url} />}
       trigger="click"
+      getPopupContainer={dom => (divDom.current ? divDom.current : dom)}
     >
-      <div className={styles['copy-block']}>
+      <div className={styles['copy-block']} ref={divDom}>
         <Icon type="download" />
       </div>
     </Popover>
-- 
GitLab