Стили CSS действуют по-разному при разработке и производстве
У меня проблемы со стилем CSS, примененным к наложению в пакете react-popup. Стиль css не работает должным образом в продакшене, тогда как в разработке он работает правильно.
В основном эти два класса кажутся проблемой:
.mm-popup {
display: none;
}
.mm-popup--visible {
display: block;
}
В разработке это работает, но в производстве .mm-popup--visible всегда установлен на display: none;.
похоже, что он даже не принимает во внимание .mm-pop--visible, а просто использует .mm-popup.
Если я попытаюсь установить это так
.mm-popup .mm-popup--visible {
display: block;
}
Бывает наоборот, это работает в разработке, но не в продакшене.
Мысли?
На самом деле, когда вы объединяете классы одного и того же div, оставьте пробел, попробуйте теперь, что вам нужно, это .mm-popup.mm-popup--visible без пробела ... То, что учитывает ваш стиль, - это поиск --visible как дочерний элемент mm-popup, но на том же уровне. Итак, вы должны использовать без пробела
@Rob Это изображения необходимы, чтобы показать, что на самом деле делает DOM, и, учитывая, как это выводится отладчиком Chrome, я не думаю, что я бы сказал, что это изображение кода? Как вы думаете, какой код здесь был бы более полезен?
@Manjunath Я только что попробовал, и ничего не изменилось.
Куда вы добавили CSS? Загружен ли css с текущими изменениями? Можете ли вы проверить исходный код в браузере и проверить, присутствуют ли эти стили?
@Manjunath css импортируется в index.js, и да, я вижу, что изменение было загружено, просмотрев стили в отладчике Chrome.
Я просто попробовал ваше предложение в сочетании с добавлением body раньше, и, похоже, это сработало. Не уверен, что это лучший способ сделать это, но, похоже, это проблема специфики, поэтому я хотел ее конкретизировать.
Можете ли вы поделиться снимком экрана, как показано выше, показывающим, как браузер просматривает класс?
@Manjunath вообще-то я думаю, вы правы, он не был загружен. Иногда, если я вношу изменения и запускаю сборку пряжи, это не отражается на сборке. Я сделал это снова и, кажется, работает только с вашим предложением. Спасибо, если вы хотите ответить, я с радостью его приму.
Да, добавлю разумный комментарий в качестве ответа, чтобы показать, что он исправлен :)
Ответы 2
Я думаю, что в mm-popup--visible между тире есть пробел, вы допустили опечатку, похоже, mm-popup- -visible
Где вы видите эту опечатку? Я не вижу этого в моих стилях CSS.
На самом деле, когда вы объединяете классы одного и того же div, оставьте место, попробуйте теперь, что вам нужно, это .mm-popup.mm-popup--visible без пробела. Дело в том, что ваш стиль ищет --visible как дочерний элемент mm-popup, но он находится на том же уровне. Итак, вы должны использовать без пробела