Within my Project, I am utilizing multiple Prime React dropdown components and I am aiming to customize one of them with a unique style. In my CSS, I have established global styles to overwrite the default settings for all the dropdowns. However, when trying to implement new CSS rules specifically for this particular dropdown using a custom class "custom-dropdown", it seems that the nested styles within the "custom-dropdown" class are not being recognized. Strangely enough, the styles do apply when not nested within a class (Unfortunately, I am unable to provide the entire code, so I am explaining in detail here. Thank you)
My attempt involved using the following CSS properties, but upon inspection, I was unable to observe the intended styles. Thank you
<Dropdown
className="custom-dropdown"
options={Days}
value={selectedDay}
onChange={(e) => {
setSelectedDay(e.target.value);
}}
/>
.custom-dropdown{
.p-dropdown-items {
display: flex !important;
flex-wrap: wrap !important;
}
.p-dropdown-items-wrapper {
overflow: hidden !important;
}
.p-dropdown-panel {
max-width: 200px !important;
min-width: 200px !important;
}
}