How to conditionally apply styles in a react component with CSS Modules?

Question

I'm using CSS Modules to scope all my styles locally by default. From my understanding the only way I'm able to use the class names set in the local stylesheet (./movieCard.styl), is by using the attribute styleName="something". So className="something", won't be able to access styles in ./movieCard.styl. I guess I could use the style={} method on the HTML element, but I want my components clean with no style markup - so I'm hoping there is another way of doing it with the way CSS Module syntax behave.

I have tried the following (Even though the methods don't give any errors, they don't work):
styleName={isHovered ? ' movie-card--show' : ''}
className={isHovered ? ' movie-card--show' : ''}

Context: I'm trying to show the movie information based on if the user is hovering over the movie poster or not. I will need to apply some sort of styling to the move-card__info element to make the text visible when the poster is hovered.

Below is an example of what I'm trying to accomplish.

import React, { Component } from 'react';
import CSSModule from 'react-css-modules';
import styles from './movieCard.styl';

class MovieCard extends Component {
  state = {
    movie: this.props.movie,
    isHovered: false,
  };

  cardHoverToggle = () => {
    const { isHovered } = this.state;
    this.setState({ isHovered: !isHovered });
  };

  render() {
    const { movie, isHovered } = this.state;

    return (
      <div styleName="movie-card" onMouseEnter={this.cardHoverToggle} onMouseLeave={this.cardHoverToggle}>
        <img
          styleName="movie-card__poster"
          src={`https://image.tmdb.org/t/p/w200/${movie.poster_path}`}
          alt={`Movie poster for ${movie.original_title}`}
        />

        <div styleName="movie-card__info">
          <p>{movie.original_title}</p>
        </div>
      </div>
    );
  }
}

export default CSSModule(MovieCard, styles);

Question: How would I be able to conditionally apply styles written in the local scope of the react-component (CSS Module), based on a state? Is this possible to do with styleName, if so how?

Answer 1

I have no experience with styleName but this is how I achieve this with className:

const completedClass = task.completed ? styles.isCompleted : '';

return (
    <div className={`${styles.task} ${completedClass}`}>
    </div>
)

So if completedClass is true styles.isCompleted will be added to className alongside styles.task which doesn't care about the state.

I have used string literals as I need multiple classes, if styles.isCompleted was the only class I needed I could use:

className={completedClass}

or

className={task.completed ? styles.isCompleted : ''}