Как использовать комбинаторы селекторов в хешированных классах модулей CSS? ⇐ CSS

[Anonymous]

У меня есть модуль CSS, в котором мне нужно переопределить стиль из стороннего компонента выбора даты, который я использую в своем собственном пользовательском компоненте. Это предполагает использование комбинатора селектора для выбора нужного элемента. Проблема в том, что когда я использую модуль CSS, имя класса теперь создается динамически, поэтому комбинация селекторов не работает, поскольку имя класса изменено (по крайней мере, я считаю, что в этом проблема?).

Вот рабочий пример в codeandbox (запустите приложение на новой вкладке, а не на боковой панели, если у вас экран меньшего размера).

CSS

.dateContainer { поле слева: 15 пикселей; поле справа: 15 пикселей; маржа-верх: 1em; ширина: 100%; } .dateContainer .react-datepicker-wrapper { дисплей: блок; } Как в конечном итоге будет выглядеть имя класса HTML:



Я также пытался использовать селектор атрибутов:

div[class*="dateContainer"] .react-datepicker-wrapper { дисплей: блок; } Проблема, которую я пытаюсь решить, заключается в том, чтобы это поле даты полностью заполнило div. Когда я проверяю HTML в браузере и снимаю флажок display: inline-block в div с классом .react-datepicker-wrapper, он делает то, что я хочу. сделать.

На данный момент выглядит так:



Я хочу, чтобы это выглядело так: