-1

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

Pravitha V
  • 3,308
  • 4
  • 33
  • 51
Abhinav
  • 9
  • 4
    What did you try so far? – Dekel Aug 26 '17 at 21:02
  • We definitely need more information to be able to help you; specifically what in your JSX do you want to have those classes? Do you want the modalBox-input to get it? – Ben Hare Aug 27 '17 at 00:50

2 Answers2

1

You need default presets or particularly jss-nested plugin, which replaces & with the parent rule selector.

{
  a: {
    '& .b, & .c:focus, & .d:focus': {
      color: 'red'
    }
  }
}
Oleg Isonen
  • 1,463
  • 10
  • 10
1

Also if you need all selectors global, which is a bad idea, you can use jss-global plugin (also part of default preset)

'@global': {
  '.a': {
    color: 'green',
    '& .b, & .c:focus, & .d:focus': {
      color: 'red'
    }
  }
}
Oleg Isonen
  • 1,463
  • 10
  • 10
  • is it possible to convert this or would each class need to be declared seaperatly? h2, h3, h4 { color: #1a3c8a; font-weight: 300; } – Steven Collins Mar 23 '20 at 11:30