diff --git a/package.json b/package.json
index ff5ec086d..fc08f97b6 100644
--- a/package.json
+++ b/package.json
@@ -110,6 +110,7 @@
"style-loader": "^0.21.0",
"svg-to-image": "1.1.3",
"text-encoding": "0.6.4",
+ "to-style": "1.3.3",
"uglifyjs-webpack-plugin": "^1.2.5",
"wav-encoder": "1.3.0",
"web-audio-test-api": "^0.5.2",
diff --git a/src/components/stage-wrapper/stage-wrapper.jsx b/src/components/stage-wrapper/stage-wrapper.jsx
index eb0d129f8..795b32247 100644
--- a/src/components/stage-wrapper/stage-wrapper.jsx
+++ b/src/components/stage-wrapper/stage-wrapper.jsx
@@ -28,7 +28,6 @@ const StageWrapperComponent = function (props) {
{
isRendererSupported ?
:
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 30885874d..d8c0d0774 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -37,6 +37,10 @@ const StageComponent = props => {
[styles.stageWrapperOverlay]: isFullScreen,
[styles.withColorPicker]: !isFullScreen && isColorPicking
})}
+ style={{
+ minHeight: stageDimensions.height,
+ minWidth: stageDimensions.width
+ }}
onDoubleClick={onDoubleClick}
>
{
{[styles.stageOverlayContent]: isFullScreen}
)}
domElement={canvas}
- height={stageDimensions.height}
- width={stageDimensions.width}
+ style={{
+ height: stageDimensions.height,
+ width: stageDimensions.width
+ }}
{...boxProps}
/>
diff --git a/src/containers/dom-element-renderer.jsx b/src/containers/dom-element-renderer.jsx
index 4636e2fb7..41f536f33 100644
--- a/src/containers/dom-element-renderer.jsx
+++ b/src/containers/dom-element-renderer.jsx
@@ -1,6 +1,7 @@
import omit from 'lodash.omit';
import PropTypes from 'prop-types';
import React from 'react';
+import Style from 'to-style';
/*
* DOMElementRenderer wraps a DOM element, allowing it to be
@@ -31,14 +32,21 @@ class DOMElementRenderer extends React.Component {
// Look at me, I'm the React now!
Object.assign(
this.props.domElement,
- omit(this.props, ['domElement', 'children'])
+ omit(this.props, ['domElement', 'children', 'style'])
);
+
+ // Convert react style prop to dom element styling.
+ if (this.props.style) {
+ this.props.domElement.style = Style.string(this.props.style);
+ }
+
return ;
}
}
DOMElementRenderer.propTypes = {
- domElement: PropTypes.instanceOf(Element).isRequired
+ domElement: PropTypes.instanceOf(Element).isRequired,
+ style: PropTypes.object // eslint-disable-line react/forbid-prop-types
};
export default DOMElementRenderer;