How to target classes with queryselector when using react-css-modules

javascript css reactjs react-css-modules
Jeanmichel Cote picture Jeanmichel Cote · Sep 10, 2016 · Viewed 16k times · Source

React-css-modules makes up class names on the fly to limit name clashes while using standalone components. Thats awesome. But once the DOM is loaded and you need to target a class for an animation, for instance, the class names that css-modules comes up with are, in parts, randomized.

How to go about with this?

Answer

John Xiao picture John Xiao · Sep 10, 2016

According from react-css-modules official doc, you can target class like bellow

render() {
    const animated = this.props.styles['animated']
    return <div className={animated}>something</div>
}

Related questions

How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More
How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

How can you achieve either a hover event or active event in ReactJS when you do inline styling? I've found that the onMouseEnter, onMouseLeave approach is buggy, so hoping there is another way to do it. Specifically, if you mouse …

Read More