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

另一种拼写方式

    public static AbstractFileReader<T> GetReader<T>(string filename, T data)
    {
        if(data is string)
        {
            return StandaloneTextFileReader(filename);
        }
        else if(data is byte[])
        {
            return StandaloneBytesFileReader(filename);
        }
        else
        {
            Debug.LogError("There is no reader for that type of data : " + data.GetType().ToString());
            return null;
        }
    }

渲染部分

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

Answer 2

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

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 = true className看起来像

className="container new-style"

如果isHovered = false

className="container"

Answer 3

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

Answer 4

您也可以这样写

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

以及div或元素

中

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

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

4 个答案: