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

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;
}
}

这是isOpen在CSS相同的变量传递给组件作为属性或isOpen名称只是一个巧合吗?如果是，为什么isOpen在CSS中可见?你能告诉我在哪里读到的吗?

经过@JAM的澄清，让我重新表述我的问题。

模态属性Modal.props.isOpen的值如何触发css样式.isOpen并影响模态组件的可见性。这个问题与classnames库无关。

: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和组件的道具isOpen之间没有直接的关联。isOpenprop值仅用于控制是否应该设置类。

---

这是isOpen在CSS相同的变量传递给组件作为属性或isOpen名称只是一个巧合吗?

我猜isOpen从组件是为了反映Modal.csscss模块中的:local(.isOpen)选择器。

基于这里的阅读，似乎

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模块，在上述任何情况下，ModalClassName的结果都将解析为一个字符串，当isOpen是true时，就会解析为Modal__isOpen___hash。当isOpen为false时，结果为空字符串。

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

它支持绑定到css模块样式(通过使用import classnames from 'classnames/bind')，如上面详细提到的。