Как отобразить условные стили (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.

Спасибо

Answer 1

Используйте строковые литералы для объединения строк.В имени класса вам просто нужно имя классов.Таким образом, с помощью `вы можете запустить строковый литерал, и внутри ${} вы можете запустить код javascript и вернуть что-то:

   <p className={`errorNotice ${this.state.error ? "error" : ''}`}>{this.state.error}</p>

Может быть, вы также можете посмотреть на styled-компоненты (https://www.styled -components.com ).ИМХО для проектов React, это действительно удобно, и вам больше не нужно создавать специальные css-файлы или заботиться об именах классов.