Is there a way to render a component with its style and position defined by specific cases without having to create a container that takes up the entire body? I want the styles of the container to match those of the component, without the need for the container to occupy the whole body.
Here is the code snippet:
var componentStyle;
//cases
componentStyle = {}; //some css properties
var MyComponent = React.createClass({
render: function(){
return(
<div style = {componentStyle}>Some content</div>
)
}
})
var container = document.createElement("div");
container.id = "container";
document.body.appendChild(container);
ReactDOM.render(<MyComponent/>,container);
Here is the CSS for the container:
#container {
position: absolute;
top:0;left: 0;
font-family: Arial, Helvetica, sans;
background: transparent;
height: 100%;
width: 100%;
z-index:9999999;
}