Merge pull request #1411 from nwind/feat-container-style

feat：container 支持设置样式

docs/zh-CN/components/container.md

@@ -19,6 +19,20 @@ Container 是一种容器组件，它可以渲染其他 amis 组件
 }
 ```
 
+### style
+
+container 可以通过 style 来设置样式，比如背景色或背景图，注意这里的属性是使用驼峰写法，是 `backgroundColor` 而不是 `background-color`。
+
+```schema: scope="body"
+{
+    "type": "container",
+    "style": {
+        "backgroundColor": "#C4C4C4"
+    },
+    "body":"这里是容器内容区"
+}
+```
+
 ## 属性表
 
 | 属性名        | 类型                              | 默认值    | 说明                |
@@ -26,4 +40,5 @@ Container 是一种容器组件，它可以渲染其他 amis 组件
 | type          | `string`                          | `"alert"` | 指定为 alert 渲染器 |
 | className     | `string`                          |           | 外层 Dom 的类名     |
 | bodyClassName | `string`                          |           | 容器内容区的类名    |
+| style         | `Object`                          |           | 自定义样式          |
 | body          | [SchemaNode](../types/schemanode) |           | 容器内容            |

package.json

@@ -43,7 +43,7 @@
     "classnames": "2.2.5",
     "dom-helpers": "^3.3.1",
     "downshift": "3.1.4",
-    "echarts": "^5.0.0",
+    "echarts": "5.0.0",
     "exceljs": "^4.2.0",
     "file-saver": "^2.0.2",
     "flv.js": "1.5.0",

src/renderers/Container.tsx

@@ -22,6 +22,13 @@ export interface ContainerSchema extends BaseSchema {
    * body 类名
    */
   bodyClassName?: SchemaClassName;
+
+  /**
+   * 自定义样式
+   */
+  style?: {
+    [propName: string]: any;
+  };
 }
 
 export interface ContainerProps extends RendererProps, ContainerSchema {
@@ -54,10 +61,12 @@ export default class Container<T> extends React.Component<
   }
 
   render() {
-    const {className, size, classnames: cx} = this.props;
+    const {className, size, classnames: cx, style} = this.props;
 
     return (
-      <div className={cx('Container', className)}>{this.renderBody()}</div>
+      <div className={cx('Container', className)} style={style}>
+        {this.renderBody()}
+      </div>
     );
   }
 }