I'm attaching the code for SCSS and react elements below
.chatPane {
height: 100%;
overflow: hidden;
.form-control, .form-control:focus, .form-control:active {
border-bottom: 0;
}
}
render() {
const { isLoaded, messages, handleSendMessage, user } = this.props;
const dialogChildren = (
<div className="modalBox">
<h1 className="modalBox-header">Join chat</h1>
<form onSubmit={this.onCreateUser}>
<input className="modalBox-input" placeholder="Type your name" onChange={this.onNameChange} />
<hr className="modalBox-horizontal"/>
<div className="modalFooter">
<Link className="modalBox-link" to="/chat">close</Link>
<button className="modalBox-button" onClick={this.onCreateUser} type="submit">join</button>
</div>
</form>
</div>
);
I want some help in converting this code into JSS
You need default presets or particularly jss-nested plugin, which replaces & with the parent rule selector.