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属性。

谢谢

Answer 1

使用字符串文字来组合字符串。在类名中，您只需要类的名称。因此，使用`可以启动字符串文字，并且可以在format[i]内部运行javascript代码并返回以下内容：

${}

也许您也可以选择查看样式化组件（https://www.styled-components.com）。 IMHO for React项目真的非常好用，您不必再创建特殊的CSS文件或使用类名了。

如何呈现条件样式（React + Sass）

1 个答案: