Question

我附加了SCSS的代码并对下面的元素做出反应

＆＃13;

.chatPane {
  height: 100%;
  overflow: hidden;

  .form-control, .form-control:focus, .form-control:active {
    border-bottom: 0;
  }
}

＆＃13;

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

＆＃13;

我希望在将此代码转换为JSS

方面提供一些帮助

Answer 1

您需要默认预设或特别是jss嵌套插件，它取代了＆amp;使用父规则选择器。

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

Answer 2

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

#!/bin/sh

zfs list | while read -r line; do
        var1=$(echo $line | awk '{print $1'})
        echo ${var1}
        # your logic here
        # ...
done

我将现有的SCSS代码转换为JSS，我坚持转换以下嵌套类

2 个答案: