From c88ea6bf4ef33b87cebe7d0798232c48f311e35d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E7=86=A0?= <lianjie.lj@alibaba-inc.com>
Date: Tue, 5 May 2020 18:29:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20style=20setter=20not=20wo?=
 =?UTF-8?q?rking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-simulator-renderer/package.json     |  1 +
 .../src/renderer-view.tsx                     | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json
index d031eb62c..b62d92110 100644
--- a/packages/react-simulator-renderer/package.json
+++ b/packages/react-simulator-renderer/package.json
@@ -21,6 +21,7 @@
     "@recore/obx-react": "^1.0.7",
     "classnames": "^2.2.6",
     "react": "^16",
+    "@ali/vu-css-style": "^1.0.2",
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx
index e964c2be9..f8ad8c747 100644
--- a/packages/react-simulator-renderer/src/renderer-view.tsx
+++ b/packages/react-simulator-renderer/src/renderer-view.tsx
@@ -1,9 +1,11 @@
 import LowCodeRenderer from '@ali/lowcode-react-renderer';
+import { isObject } from 'lodash';
 import { ReactInstance, Fragment, Component, createElement } from 'react';
 import { observer } from '@recore/obx-react';
 import { SimulatorRenderer } from './renderer';
 import { host } from './host';
 import './renderer.less';
+import { toCss } from '@ali/vu-css-style';
 
 // patch cloneElement avoid lost keyProps
 const originCloneElement = window.React.cloneElement;
@@ -84,6 +86,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           const { __id, __desingMode, ...viewProps } = props;
           viewProps.componentId = __id;
           viewProps._leaf = host.document.getNode(__id);
+
+          // FIXME: 此处未来使用propsReducer方式处理
+          this.createNodeStyleSheet(viewProps);
+
           return createElement(
             Component,
             viewProps,
@@ -99,4 +105,28 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
       />
     );
   }
+  createNodeStyleSheet(props: any) {
+    if (props && props.fieldId) {
+      let styleProp = props.__style__;
+
+      if (isObject(styleProp)) {
+        styleProp = toCss(styleProp);
+      }
+
+      if (typeof styleProp === 'string') {
+        const s = document.createElement('style');
+        const cssId = '_style_pesudo_' + props.fieldId;
+        const cssClass = '_css_pesudo_' + props.fieldId;
+
+        props.className = cssClass;
+        s.setAttribute('type', 'text/css');
+        s.setAttribute('id', cssId);
+        document.getElementsByTagName('head')[0].appendChild(s);
+
+        s.appendChild(document.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
+
+        return s;
+      }
+    }
+  }
 }