Seeking advice on overriding a style in a CSS module for a third-party datepicker component used within a custom component. The challenge lies in targeting the correct element with a selector combinator, complicated by the dynamic creation of class names in CSS modules.
To better illustrate, here is a working example in codesandbox (open in a new tab for smaller screens).
CSS
.dateContainer {
margin-left: 15px;
margin-right: 15px;
margin-top: 1em;
width: 100%;
}
.dateContainer .react-datepicker-wrapper {
display: block;
}
Example HTML class name appearance: https://i.stack.imgur.com/HPJmb.png
An attempt using an attribute selector:
div[class*="dateContainer"] .react-datepicker-wrapper {
display: block;
}
The current issue involves ensuring the date field fills the div entirely. By inspecting the HTML and unchecking display: inline-block within the .react-datepicker-wrapper class, desired results are achieved.
Present layout: https://i.stack.imgur.com/I69A9.png
Desired layout: https://i.stack.imgur.com/CIvl5.png