Allow more styling

Author: Ives van Hoorne

packages/react-sandpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-smooshpack",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "",
   "keywords": [],
   "license": "SEE LICENSE.MD IN ROOT",
@@ -77,7 +77,7 @@
     "react-broadcast": "^0.6.2",
     "react-codemirror2": "^4.0.1",
     "rollup-plugin-scss": "^0.4.0",
-    "smooshpack": "^0.0.9"
+    "smooshpack": "^0.0.10"
   },
   "peerDependencies": {
     "react": "^16.0.0"

packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx

@@ -14,6 +14,8 @@ export interface State {
 }
 
 export interface Props {
+  className?: string;
+  style?: Object;
   files: IFiles;
   initialPath?: string;
   entry?: string;
@@ -169,7 +171,7 @@ export default class SandpackProvider extends React.PureComponent<
   };
 
   render() {
-    const { children } = this.props;
+    const { children, className, style } = this.props;
     const { iframe, files, browserPath, openedPath, managerState } = this.state;
 
     return (
@@ -185,7 +187,7 @@ export default class SandpackProvider extends React.PureComponent<
           bundlerURL: this.manager ? this.manager.bundlerURL : undefined,
         }}
       >
-        <div className="sandpack">
+        <div style={style} className={`${className ? className : ''} sandpack`}>
           {/* We create a hidden iframe, the bundler will live in this.
             We expose this iframe to the Consumer, so other components can show the full
             iframe for preview. An implementation can be found in `Preview` component. */}

packages/sandpack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smooshpack",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "",
   "keywords": [],
   "main": "dist/sandpack.umd.js",