如何使用CSS模块有条件地在react组件中应用样式？

Question

我默认使用CSS模块在本地范围内调整我的所有样式。根据我的理解，我能够使用本地样式表（./movieCard.styl）中设置的类名的唯一方法是使用属性styleName="something"。所以className="something"，将无法访问./movieCard.styl中的样式。我想我可以在HTML元素上使用style={}方法，但我希望我的组件干净而没有样式标记 - 所以我希望有另一种方法可以用CSS模块语法的行为来实现它。

我尝试了以下（即使方法没有给出任何错误，它们也不起作用）： styleName={isHovered ? ' movie-card--show' : ''} className={isHovered ? ' movie-card--show' : ''}

上下文：我试图根据用户是否悬停在电影海报上来显示电影信息。我将需要对move-card__info元素应用某种样式，以便在海报悬停时使文本可见。

下面是我想要完成的一个例子。

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);

问题：如何根据状态有条件地应用在react-component（CSS模块）的本地范围内编写的样式？这可能与styleName有关，如果是这样的话怎么样？

Answer 1

如果要在当前className上添加“movie-card - show”，可以将其与类名一起使用。

import classnames from 'classnames';

用法：

className={classnames('Here-goes-your-classes-you-always-use', { 'movie-card--show': isHovered })}

如果isHovered为true，它会在你的'Always use classes'中添加另一个类

例：

让我们说你有一个简单的div

<div className={classnames('container',{'new-style' : isHovered})}>

如果qazxsw poi类名称应该是这样的

isHovered = true

如果className="container new-style"

isHovered = false

Answer 2

我没有使用className="container" 的经验，但这是我用styleName实现这一目标的方法：

className

因此，如果

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

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

是真的completedClass将被加入styles.isCompleted与className并不关心国家。

我已经使用了字符串文字，因为我需要多个类，如果styles.task是我需要的唯一类我可以使用：

styles.isCompleted

要么

className={completedClass}