Question

我正在研究第三者对 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}`} />

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

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

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

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

<块引用>

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

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

根据阅读here，似乎

这个：（将样式绑定到类名）

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 的结果都将解析为一个字符串，当 Modal__isOpen___hash 为 {{ 1}} 以上。当 isOpen 为 false 时，结果将为空字符串。

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

它支持上面详细提到的 binding to css module styles（通过使用 true）。

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

1 个答案: