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

【问题标题】：How to conditionally apply styles in a react component with CSS Modules?如何使用 CSS 模块有条件地在反应组件中应用样式？
【发布时间】：2018-07-24 12:36:56
【问题描述】：

默认情况下，我使用 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 相关吗？如果可以，怎么办？

【问题讨论】：

Looks like there is no way to do this，但我不确定。您是否可以选择仅通过 Webpack 使用“常规”CSS 模块？然后你可以像你在问题中提到的那样做className={isHovered ? styles.myCardShow : ''}。
使用高阶组件注入 props 可能会奏效。你能创建一个沙箱/codepen，以便我们尝试方法吗？

标签： reactjs styled-components css-modules

【解决方案1】：

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

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

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

因此，如果completedClass 为真，styles.isCompleted 将与styles.task 一起添加到不关心状态的className。

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

className={completedClass}

或

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

【讨论】：

【解决方案2】：

另一种拼写方式

import cx from 'classnames';
import s from './style.scss';

渲染部分

<div className={cx(s.container, {
    [s.hovered]: this.state.isHovered,
})}/>

【讨论】：

【解决方案3】：

如果您不想在当前类名上添加“电影卡--显示”，您可以将其与类名一起使用。

import classnames from 'classnames';

用法：

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

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

例子：

假设你有一个简单的 div

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

如果isHovered = true className 看起来像

className="container new-style"

如果isHovered = false

className="container"

【讨论】：

【解决方案4】：

你也可以这样写

import classnames from "classnames";
import classes from "./Navbar.module.scss";

在 div 或元素内

className={[classnames(classes.navbar, {
          [classes.navbar__hidden]: !this.state.visible
        })].join(" ")}

【讨论】：