reactjs - 如何在带有 CSS 模块的 React 组件中有条件地应用样式？

In lại 作者：行者123 更新时间：2023-12-04 14:54:18 25 4

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;

    trở lại (
      

        
          styleName="movie-card__poster"
          src={`https://image.tmdb.org/t/p/w200/${movie.poster_path}`}
          alt={`Movie poster for ${movie.original_title}`}
        />

        

          
{movie.original_title}

        

      

    );
  }
}

export default CSSModule(MovieCard, styles);

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

trở lại (
    

    

)

className={completedClass}

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

25 4 0

• mysql随机更新两个日期之间的日期列(有条件)

  如何在 2014-10-04 - 2014-10-30 仅工作日和 08.00 - 20.00 之间随机更新日期列？ 2014-10-04 - 2014-10-30 random working-da

• 将二维数组转换为一维数组(有条件)

  我有一个二维 (3x7) 数组，我想转换为一维数组，以便我提供的行位于中心。行值可能沿途变化，但必须位于中心。 #define numRows 3 #define numCols 7 #define

• Jpa OneToMany 有条件

  我有2张 table : 第一个是“人”: person_id, 人名 第二个是“PersonsGraphs”: person_id1, person_id2, 关系类型 我正在寻找一种建立“家谱”的

• java - @JsonIgnore 有条件

  是否可以在序列化 JSON 响应的同时根据 If 条件排除某些元素？ if(a == 1) { //show element } else { //don't show element }

• java - @JsonIgnore 有条件

  是否可以在序列化 JSON 响应的同时根据 If 条件排除某些元素？ if(a == 1) { //show element } else { //don't show element }

• javascript - jQuery 有条件

  尝试使用 jQuery 编写一个条件，该条件基本上说明，如果 div.gathering 不包含 a.cat-link，则执行以下操作。我已经尝试过以下方法，但似乎不起作用。有人能解释一下吗？ if(

• c - 在列表中插入节点的副本(有条件)

  该练习要求插入值 x 的副本(这也是要在列表中搜索的值)，但前提是该位置是另一个值 n 的倍数。未指定副本应插入到 x 值之前还是之后。 我的问题是并非在所有情况下都插入副本。我认为问题在于，当我插入

• c - (有条件？)在函数中创建局部变量

  我遇到了这个[问题]:How can I store values into a multi-parameter struct and pass typedef struct to a functio

• java - 井字游戏(有条件)

  出于某种原因，当我编写 getWinner() 时，它仅适用于 2 种情况(最后一行)。就对角线和列而言，我拥有其他一切，但第 2 行(嗯，三，但数组，所以 2)基本上只适用于 o。只有当 o 位于

• MYSQL - 将一列复制到同一个表中的另一列 - 有条件

  我有一个问题。 我想将“guid”列中的值复制到“帖子内容” 所有行都在一个表“wp-posts”中 “postparent”列中的一行有一个值，而“ID”列中的另一项也有相同的值 我必须做的事情是

• MySQL - 合并两个表 - 有条件

  我想将两个像这样的表合并到一个表中，并为重复的键行添加合并表中最旧的 DateAdded 值。 (Key1,Key2) 是主键。 +-----------+-----------+------+---

• mysql - 选择具有最大值的唯一行(有条件)

  通过下面的表格和数据，我试图获得最高的 effective_from每个唯一 brand 小于当前时间戳的值/model组合 - 实际上是每件商品的当前价格。 CREATE TABLE things

• mysql - 如何删除未知号码的最后一条记录(有条件)？

  您能告诉我如何删除未知号码的最后一条记录(有条件)吗？ 例如，在这种情况下我想删除id为6到10的记录。 注意:该表和记录不是恒定的。 +----+-----+---------+ | id | ur

• php - 添加时间到mysql时间戳列，有条件

  这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用，visit the

• mysql - 多次计算带有外键的子表，有条件

  我有两个表， 标签 -> id,name,description,user,status 标签_连接。 -> id, Label_id, 类别 所以有多个类别，假设 1 => 新的，2 => 旧的。

• java - 将每个单词的第一个字母移动到末尾并添加一个字符，有条件

  好的，我会长话短说。 这是我的代码 String s = edittextkata.getText().toString(); String[] vowels = {"a","

• Linux 查找和替换(有条件)

  我有一个非常具体的要求，我发现很难做到，我需要查找并替换文件中的某些行，但问题是文本不同，唯一的好处是它们都有一个 .[扩展名] 例如: 30/07/2012 14:46 17

• MongoDB updateMany 有条件

  我有一个大型数据库，其中存在各种不一致之处。我想澄清的项目之一是根据人口更改国家/地区状态。 数据样本是: { "_id" : "D", "name" : "Deutschland", "pop" :

• arrays - 将范围(有条件)中的唯一值组合到另一个范围中

  我需要将范围(有条件)中的唯一值组合到同一行的另一个范围中。 其实我前两天发过类似的问题Link所提供的答案在我提出上述问题时有效。 但后来，我遇到了一个新问题，我宁愿问一个新的问题，让它更清楚: (

• VBA - 将字符串中的字符拆分、复制和粘贴到另一个单元格(有条件)

  我刚开始使用 VBA，并且正在努力处理需要清理的工作表。 我有一列包含混合邮政编码和城市名称的字符串。我想从 A 列中提取邮政编码并放在 B 列中，并在 C 列中提取带有下划线的城市名称。 我的(示例