我可以在 PostCss 样式中使用反应组件属性吗

Question

我正在调查第 3 方对 PostCss 组件的反应

我在其中看到属性 isOpen 从外部收到

import React, { Component } from 'react';
import classNames from 'classnames/bind';
import PropTypes from 'prop-types';
import styles from './Modal.css';

class Modal extends Component {
  render() {
    const {
      isOpen,
    } = this.props;

    const cx = classNames.bind(styles);

    const ModalClassName = cx({
      Modal: true,
      isOpen: isOpen,
    });

    return (
      <div className={ModalClassName} tabIndex={0}>

        ... modal content ...

      </div>
    )
  }
}

Modal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
};

export default Modal;

在 Modal.css 中我可以看到隐藏此模态组件的样式

:local(.Modal) {
  &:not(:local(.isOpen)) {
    visibility: hidden;
    opacity: 0;
  }
}

/* -------------   I miss this one as well  ------------- */
:local(.isOpen) {
  @media print {
    position: static !important;
  }
}

这是 CSS 中的 isOpen 作为属性传递给组件的同一个变量还是 isOpen 名称只是巧合？ 如果是，为什么isOpen 在 CSS 中是可见的？您能否给我参考一下我在哪里读到的。

在@JAM 提供有用的澄清后，让我重新表述我的问题。

Modal 属性Modal.props.isOpen 中的值如何触发css 样式.isOpen 并影响Modal 组件的可见性。问题不在于类名库。

:local(.Modal) {
  &:not(:local(.isOpen)) {
    visibility: hidden;
    opacity: 0;
  }
}

Answer 1

Modal 属性 Modal.props.isOpen 中的值如何触发 css 样式 .isOpen 并影响 Modal 组件的可见性。

isOpen（简单来说）是从css模块Modal.css（来自styles）导入的类名。

因此，在您的组件中，您可以根据自己的选择组合从styles 公开的类，例如：

<div className={`${styles.Modal} ${styles.isOpen}`} />

.isOpen 不是类名的一部分时 .Modal 被隐藏的原因是为选择器 .Modal:not(.isOpen) 指定的 CSS 规则，或在 css 模块中指定：

:local(.Modal) {
  &:not(:local(.isOpen)) {
    visibility: hidden;
    opacity: 0;
  }
}

因此，当元素具有类Modal isOpen 时，该元素是可见的。当元素具有Modal 类但缺少isOpen 时，该元素将被明显隐藏。

类名 isOpen 和组件的 prop isOpen 之间没有直接关联。 isOpen 属性值仅用于控制是否应设置类。

---

这是 CSS 中的 isOpen 与作为属性传递给组件的相同变量还是 isOpen 名称只是巧合？

我猜测组件中的isOpen 是为了反映Modal.css css module 中的:local(.isOpen) 选择器。

根据here的阅读，似乎

this：（将样式绑定到类名）

import classNames from 'classnames/bind';
import styles from './Modal.css';

const cx = classNames.bind(styles);

const ModalClassName = cx({
    isOpen: true,
});

等于：（引用样式）

import classNames from 'classnames';
import styles from './Modal.css';

const ModalClassName = classNames({
    [styles.isOpen]: true,
});

因为您使用的是css modules，所以在上述任何情况下ModalClassName 的结果都将解析为一个字符串，当isOpen 是上面的true 时类似于Modal__isOpen___hash。当isOpen 为假时，结果为空字符串。

classnames 只是一个简单的 JavaScript 实用程序，用于有条件地将类名连接在一起。

它支持binding to css module styles（通过使用import classnames from 'classnames/bind'），如上所述。