我正在将现有的 SCSS 代码转换为 JSS，我一直在转换以下嵌套类答案

【问题标题】：I'm converting existing SCSS code to JSS, I'm stuck at converting the following nested classes我正在将现有的 SCSS 代码转换为 JSS，我一直在转换以下嵌套类
【发布时间】：2018-02-04 13:51:42
【问题描述】：

我在下面附上了 SCSS 和反应元素的代码

.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>
    );

我需要一些帮助来将此代码转换为 JSS

【问题讨论】：

到目前为止你尝试了什么？
我们肯定需要更多信息才能为您提供帮助；具体来说，您希望在 JSX 中有哪些类？你想让modalBox-input得到它吗？

标签： css reactjs sass jss

【解决方案1】：

另外，如果您需要所有选择器全局，这是个坏主意，您可以使用 jss-global 插件（也是默认预设的一部分）

'@global': {
  '.a': {
    color: 'green',
    '& .b, & .c:focus, & .d:focus': {
      color: 'red'
    }
  }
}

【讨论】：

是否可以转换这个或者每个类都需要单独声明？ h2, h3, h4 { 颜色: #1a3c8a;字体粗细：300； }

【解决方案2】：

您需要默认预设或特别是 jss 嵌套插件，它将 & 替换为父规则选择器。

{
  a: {
    '& .b, & .c:focus, & .d:focus': {
      color: 'red'
    }
  }
}

【讨论】：