如何渲染条件样式（React + Sass）

Question

我的scss文件中有这些类：

.errorNotice {

  display: none;

  font-size: 12px;

  color: #D85B5F;

  background: white;

  padding: 5px;

  .error & {

    display: inline-block;

  }

}

在我的render职能中，

{this.state && this.state.error ?

     (

     <p className={styles.errorNotice + (this.state.error ? styles.error : '')}>{this.state.error}</p>

     ) :

     null

}

但这并没有给我我想要的风格。它给了我一个奇怪的串联：

campaigns-components-WaitlistForm-styles_errorNotice-1X-Ty4campaigns-components-WaitlistForm-styles_error-JNXx2E

我的目标是显示errorNotice具有正确display属性的 。