For example:

<div className="place__list--more">

Somewhere, I do not remember exactly, I read that the use of hyphens can lead to errors.

  • What is the problem to try yourself? (: - Suvitruf ♦
  • Nothing, just put a hyphen, but all the rules are displayed - stiv
  • Probably you read it about BEM - Alexey Ten

1 answer 1

That is possible.

If you use CSS-modules , then you just have to wrap it in brackets:

 import s from './my_styles.scss'; render() { return ( <div className={s['place__list-more']}> </div> ); }

A source

If you use the classic approach, then no problems will arise if the class name is a valid string:

 import './my_styles.scss'; render() { return ( <div className={'place__list-more'}> </div> ); }
  • Wow, for the first time I see a similar approach with importing a SCSS file and treating it as a JS object. I would be very grateful if you share the link or the name of the approach - Alexandr Tovmach
  • @AlexandrTovmach and how do you usually use styles in a reactor? medium.com/@Connorelsea/… - Suvitruf ♦
  • You have written s['my-class'] , which seems to refer to s as an object. As I usually do className={"my-class"} . According to the link that you did not understand, there are no examples with a similar syntax - Alexandr Tovmach
  • @AlexandrTovmach glenmaddern.com/articles/css-modules - Suvitruf ♦