Can I use react component property inside PostCss style

user_1970440 0
Viewed 213

I'm investigating 3rd party react with PostCss component

in which I see property isOpen received from outside

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;

in Modal.css I can see style to hide this modal component

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

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

Is this isOpen in CSS same variable passed to component as a property or isOpen name just a coincidence? If yes, how come isOpen is visible within CSS? Could you please give me reference where I read about this.

After useful clarifications from @JAM let me rephrase my question.

How value in Modal property Modal.props.isOpen can trigger css style .isOpen and affect visibility of Modal component. The question is not about classnames library.

:local(.Modal) {
  &:not(:local(.isOpen)) {
    visibility: hidden;
    opacity: 0;
  }
}
postcss reactjs css
1 Answers

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

isOpen is (in simple terms) a class name imported from the css module Modal.css (from styles).

So, in your component you can then compose the classes exposed from styles as you choose, for example:

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

The reason the .Modal is hidden when .isOpen is not part of the class name, is due to the CSS rules specified for the selector .Modal:not(.isOpen), or as specified in the css module:

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

So, when the element has the class Modal isOpen, the element is visible. When the element has the class Modal but is missing isOpen, the element will be visibly hidden.

There is no direct correlation between the class name isOpen and te component's prop isOpen. The isOpen prop value is only used to control if the class should be set or not.

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

I am guessing that isOpen from the component is meant to reflect the :local(.isOpen) selector in the Modal.css css module.

Based on the reading here, it seems that

this: (binding styles to classnames)

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

const cx = classNames.bind(styles);

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

is equal to this: (referencing styles)

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

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

Because you are using css modules, the result of ModalClassName in any of the cases above will resolve into a string, to something like Modal__isOpen___hash when isOpen is true above. When isOpen is false, the result will be an empty string.

classnames is just a simple JavaScript utility for conditionally joining classNames together.

It supports binding to css module styles (by using import classnames from 'classnames/bind') as referenced in detail above.

user_19802350
Related