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

Question

默认情况下，我使用CSS 模块在本地范围内我的所有样式。根据我的理解，我能够使用在本地样式表 ( ./movieCard.styl) 中设置的类名的唯一方法是使用属性styleName="something". 因此className="something"，将无法访问./movieCard.styl. 我想我可以style={}在 HTML 元素上使用该方法，但我希望我的组件干净，没有样式标记 - 所以我希望有另一种方法可以使用 CSS Module 语法的行为方式来做到这一点。

我尝试了以下方法（即使这些方法没有给出任何错误，它们也不起作用）：
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);

问：我如何将能够有条件地申请写在反应组分（本地范围的样式CSS模块）的基础上，状态？这可能与styleName，如果有的话如何？

Answer 1

我没有经验，styleName但这就是我实现这一目标的方式className：

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

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

所以 ifcompletedClass是 truestyles.isCompleted将被添加到不关心状态的className旁边styles.task。

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

className={completedClass}

或者

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

Answer 2

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

import classnames from 'classnames';

用法：

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

如果 isHovered 为 true ，它将向您的“始终使用类”添加另一个类

例子：

假设你有一个简单的 div

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

如果isHovered = trueclassName 看起来像

className="container new-style"

如果isHovered = false

className="container"