reactjs - 如何在带有 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);

问题:我如何能够根据状态有条件地应用在 react-component(CSS 模块)的本地范围内编写的样式？这可能与 styleName有关吗？ ，如果有怎么办？

Answer 1

我没有使用 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}

或者

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