Perhaps I forgot something about how React components behave, but I noticed that even though I specified class=“editor”, my height and width values for the “editor” class are ignored. The same values put into textarea allow my React component to properly size itself. Why is this happening?
My css file:
body {
background-color: #334;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.editor {
height: 300px;
width: 500px;
}
.preview {
border: 10px solid black;
border-radius:10px;
background-color: white;
height: 300px;
width: 300px;
}
textarea {
height: 300px;
width: 500px;
}
And here are the components defined in my render function:
return (<div>
<h1>Editor</h1>
<textarea id="editor" class="editor" value={this.state.input} onChange={this.handleChange} />
<h1>Preview</h1>
<div id="preview" class="preview" dangerouslySetInnerHTML={inner}></div>
</div>
);
It seems as both “editor” and “preview” class names are not getting values from my css file.