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

Question

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?

John Xiao · Accepted Answer · 2016-09-10 06:32:52Z

2

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>
}

edited Sep 10, 2016 at 6:32

answered Sep 10, 2016 at 5:55

John Xiao

1,8582 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

finalfreq · Accepted Answer · 2016-09-10 04:14:44Z

1

Query selector shouldn't be necessary with react just attach a ref to the element you want and you have access to it within any function of the react component. https://facebook.github.io/react/docs/more-about-refs.html

answered Sep 10, 2016 at 4:14

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

Comments

Jeanmichel Cote · Accepted Answer · 2016-09-12 15:06:00Z

1

So I ended up using the classNames npm module to add and remove classes to an element when I need more than one. Works like this:

let myClasses = classNames({
  'button': true,
  'special': this.state.special
})

<button className={myClasses} />

edited Sep 12, 2016 at 15:06

answered Sep 12, 2016 at 13:15

Jeanmichel Cote

5511 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related