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

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

How value in Modal property Modal.props.isOpen can trigger css style .isOpen and affect visibility of Modal component.

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

因此，在您的组件中，您可以根据需要组合从 styles 公开的 classes，例如：

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

当 .isOpen 不是 class 名称的一部分时 .Modal 被隐藏的原因是由于为选择器 [=20] 指定的 CSS 规则=]，或在 css 模块中指定：

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

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

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

Is this isOpen in CSS same variable passed to component as a property or isOpen name just a coincidence?

我猜测组件中的 isOpen 是为了反映 Modal.css css module.

中的 :local(.isOpen) 选择器

根据阅读here，似乎

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

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 当 isOpen 是true 以上。当 isOpen 为假时，结果将为空字符串。

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

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

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

Can I use react component property inside PostCss style

css

reactjs

postcss

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

Can I use react component property inside PostCss style

css

reactjs

postcss

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