Question 248151 in Html Question posted in
Some basic documentation can be found here.

Html – Why is my PrimeReact dropdown component not detecting custom class styles?

I’m using multiple Prime React dropdown components in my Project and want to style one of them in a different way. I’ve global styles for all of them in CSS to override the default one’s. So for this specific dropdown, I tried applying new CSS styles using a custom class "custom-dropdown". But it’s not even detecting the CSS styles inside nested in class "custom-dropdown". But, when applying without nested class, its working. (Sorry, Not able to provide entire code, so elaborated here. Thank you)

I tried this way in CSS, but I couldn’t even see the styles while inspecting. 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;
}
}
Tags:

2

Answers


  1. 0

    I don’t see any issues when styling. Please see working DEMO

    <Dropdown
   className="custom-dropdown"
   options={Days}
   value={selectedDay}
   onChange={(e) => {
     setSelectedDay(e.target.value);
   }}
 />

    Also, you need may need to have the file extension .scss for your styles file.

    Login or Signup to reply.
  2. 0

    PrimeReact dropdown components generate their own HTML structure, and sometimes the CSS classes used by these components are deeply nested and not directly accessible through the parent class.

    To style a PrimeReact dropdown component with a custom class, you can try using a more specific selector or using the ::ng-deep pseudo-class, which allows you to apply styles to nested elements within a component. Here’s an example of how you can do it:

    /* Using a more specific selector */
.custom-dropdown .p-dropdown-items {
  display: flex !important;
  flex-wrap: wrap !important;
}

.custom-dropdown .p-dropdown-items-wrapper {
  overflow: hidden !important;
}

.custom-dropdown .p-dropdown-panel {
  max-width: 200px !important;
  min-width: 200px !important;
}

    If the above approach doesn’t work, you can try using the ::ng-deep pseudo-class, which is sometimes necessary for styling nested components in Angular applications (PrimeReact is built on Angular). Here’s how you can use it:

    /* Using ::ng-deep to style nested elements */
.custom-dropdown::ng-deep .p-dropdown-items {
  display: flex !important;
  flex-wrap: wrap !important;
}

.custom-dropdown::ng-deep .p-dropdown-items-wrapper {
  overflow: hidden !important;
}

.custom-dropdown::ng-deep .p-dropdown-panel {
  max-width: 200px !important;
  min-width: 200px !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search