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

Question

I have these classes in my scss file:

.errorNotice {
  display: none;
  font-size: 12px;
  color: #D85B5F;
  background: white;
  padding: 5px;

  .error & {
    display: inline-block;
  }
}

And in my render function,

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

This isn't giving me the styles I want though. It's giving me a weird concatenation:

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

My goal is to display the errorNotice with the correct display attribute.

Thanks

Answer 1

Use string literals to combine strings. In classname you just need the name of the classes. So with the ` you can start a string literal and inside of ${} you can run javascript code and return something:

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

Maybe it's also an option for you to have a look at styled-components( https://www.styled-components.com ). IMHO for React projects this is really neat to use and you don't have to create special css-files anymore or take care of classnames.