Могу ли я использовать свойство компонента реакции внутри стиля PostCss

Я изучаю стороннюю реакцию с компонентом 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 и повлиять на видимость модального компонента. Вопрос не в библиотеке имен классов.

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

reactjs css postcss
person AlexeiP    schedule 25.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как значение в модальном свойстве Modal.props.isOpen может вызвать стиль css .isOpen и повлиять на видимость модального компонента.

isOpen — это (просто говоря) имя класса, импортированное из модуля css Modal.css (из styles).

Итак, в вашем компоненте вы можете затем составить классы, представленные из styles, по вашему выбору, например:

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

Причина, по которой .Modal скрыта, когда .isOpen не является частью имени класса, связана с правилами CSS, указанными для селектора .Modal:not(.isOpen), или как указано в модуле css:

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

Итак, когда элемент имеет класс Modal isOpen, элемент виден. Когда элемент имеет класс Modal, но отсутствует isOpen, элемент будет явно скрыт.

Нет прямой корреляции между именем класса isOpen и свойством компонента isOpen. Значение свойства isOpen используется только для управления тем, должен ли класс быть установлен или нет.

Это та же переменная isOpen в CSS, которая передается компоненту в качестве свойства, или имя isOpen просто совпадение?

Я предполагаю, что isOpen из компонента предназначено для отражения селектора :local(.isOpen) в Modal.css модуле css.

На основании чтения здесь кажется, что

это: (привязка стилей к именам классов)

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 в любом из приведенных выше случаев будет разрешается в строку, что-то вроде Modal__isOpen___hash, когда isOpen равно true выше. Когда isOpen равно false, результатом будет пустая строка.

classnames — это простая утилита JavaScript для условного объединения имен классов.

Он поддерживает привязку к стилям модулей CSS (с помощью import classnames from 'classnames/bind'), как подробно указано выше.

person JAM    schedule 25.02.2021
comment
[styles.isOpen]: isOpen это имеет смысл. Мне было интересно, может ли процессор PostCss повторно применять стили во время выполнения на основе измененного значения isOpen. Это свойство меняется каждый раз, когда пользователь нажимает кнопку на владельце этого модального окна. Может ли PostCss отображать новый стиль при изменении свойства? Я думал, что после обработки стили становятся статичными. - person AlexeiP; 26.02.2021
comment
Спасибо за отличную ссылку! - person AlexeiP; 26.02.2021
comment
@AlexeiP Чтобы уточнить, модуль css (Modal.css) является статическим и не имеет ничего общего с рендерингом. Пакет classnames — это просто служебная функция для лучшей работы с именами классов (присоединение и условное присоединение к классам). Я обновил ответ, чтобы включить ссылку на дополнительную информацию о модулях css. - person JAM; 26.02.2021
comment
Спасибо, я обновил исходный пост с перефразированным вопросом внизу. - person AlexeiP; 26.02.2021
comment
@AlexeiP Я обновил ответ, чтобы лучше попытаться ответить на ваш вопрос. - person JAM; 27.02.2021
comment
Когда isOpen имеет значение false, результатом будет пустая строка. Это я уже начал подозревать. Пустая строка для класса приведет к тому, что условие not(:local(.isOpen)) станет истинным и скроет Modal. Благодарю вас! - person AlexeiP; 28.02.2021