From e1e8d41c60dea7e76083116d93a2e22d9cef4aad Mon Sep 17 00:00:00 2001
From: "zhanning.bzn" <zhanning.bzn@antfin.com>
Date: Fri, 15 Nov 2019 15:40:13 +0800
Subject: [PATCH] =?UTF-8?q?WIP:=20G6=20=E8=BF=81=E7=A7=BB=E6=96=B0?=
 =?UTF-8?q?=E5=AE=98=E7=BD=91=EF=BC=8C=E6=B7=BB=E5=8A=A0css=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/case/simplifyCluster/demo/index.js        | 14 ++++++++++++++
 .../highlight/demo/activateRelations.js            | 13 +++++++++++++
 .../interaction/highlight/demo/highlightDark.js    | 13 +++++++++++++
 examples/net/dagreFlow/demo/basicDagre.js          | 13 +++++++++++++
 examples/tool/tooltip/demo/tooltip.js              | 13 +++++++++++++
 gatsby-browser.js                                  |  1 +
 package.json                                       |  1 +
 7 files changed, 68 insertions(+)

diff --git a/examples/case/simplifyCluster/demo/index.js b/examples/case/simplifyCluster/demo/index.js
index fbc1e09f3c..b13da9a912 100644
--- a/examples/case/simplifyCluster/demo/index.js
+++ b/examples/case/simplifyCluster/demo/index.js
@@ -1,4 +1,18 @@
 import G6 from '@antv/g6';
+import insertCss from 'insert-css';
+
+insertCss(`
+  .g6-tooltip {
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #545454;
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 10px 8px;
+    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+  }
+`);
+
 /**
    * 该示例演示 Fruchterman 布局算法的聚类效果，以及点击交互进行聚类的聚合和扩散效果
    * by 十吾
diff --git a/examples/interaction/highlight/demo/activateRelations.js b/examples/interaction/highlight/demo/activateRelations.js
index 0dc594ce04..c39f5cbf80 100644
--- a/examples/interaction/highlight/demo/activateRelations.js
+++ b/examples/interaction/highlight/demo/activateRelations.js
@@ -1,4 +1,17 @@
 import G6 from '@antv/g6';
+import insertCss from 'insert-css';
+
+insertCss(`
+  .g6-tooltip {
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #545454;
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 10px 8px;
+    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+  }
+`);
 
 const graph = new G6.Graph({
   container: 'container',
diff --git a/examples/interaction/highlight/demo/highlightDark.js b/examples/interaction/highlight/demo/highlightDark.js
index a312cf00c9..9287464662 100644
--- a/examples/interaction/highlight/demo/highlightDark.js
+++ b/examples/interaction/highlight/demo/highlightDark.js
@@ -1,4 +1,17 @@
 import G6 from '@antv/g6';
+import insertCss from 'insert-css';
+
+insertCss(`
+  .g6-tooltip {
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #545454;
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 10px 8px;
+    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+  }
+`);
 
 const graph = new G6.Graph({
   container: 'container',
diff --git a/examples/net/dagreFlow/demo/basicDagre.js b/examples/net/dagreFlow/demo/basicDagre.js
index e3e00280df..55e61017b8 100644
--- a/examples/net/dagreFlow/demo/basicDagre.js
+++ b/examples/net/dagreFlow/demo/basicDagre.js
@@ -1,4 +1,17 @@
 import G6 from '@antv/g6';
+import insertCss from 'insert-css';
+
+insertCss(`
+  .g6-tooltip {
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #545454;
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 10px 8px;
+    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+  }
+`);
 
 const data = {
   nodes: [{
diff --git a/examples/tool/tooltip/demo/tooltip.js b/examples/tool/tooltip/demo/tooltip.js
index a179793d2d..3be8bf1a3b 100644
--- a/examples/tool/tooltip/demo/tooltip.js
+++ b/examples/tool/tooltip/demo/tooltip.js
@@ -1,4 +1,17 @@
 import G6 from '@antv/g6';
+import insertCss from 'insert-css';
+
+insertCss(`
+  .g6-tooltip {
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #545454;
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 10px 8px;
+    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
+  }
+`);
 
 const data = {
   nodes: [{
diff --git a/gatsby-browser.js b/gatsby-browser.js
index c1081da675..372809615f 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1 +1,2 @@
 window.g6 = require('./src/index.js');
+window.insertCss = require('insert-css');
diff --git a/package.json b/package.json
index 2910ef99f7..927766b5ab 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "gh-pages": "^2.1.1",
     "hard-source-webpack-plugin": "~0.13.1",
     "home": "~1.0.1",
+    "insert-css": "^2.0.0",
     "jquery": "^3.3.1",
     "jszip": "~3.1.5",
     "nightmare": "~2.10.0",