What could be causing my PrimeReact dropdown component to ignore the custom class styles?

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;
}
}

Answer №1

With the 'panelClassName' attribute, you have the ability to include a custom class for the dropdown panel within the PrimeReact dropdown component.

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

Answer №2

No issues found in the styling process. Feel free to check out the live demonstration HERE

<Dropdown
   className="custom-dropdown"
   options={Choices}
   value={selectedOption}
   onChange={(e) => {
     setSelectedOption(e.target.value);
   }}
 />

Additionally, remember to use the file extension .scss for your stylesheet.

Answer №3

.custom-dropdown > [class~="p-dropdown-items"]{
  //styling
}

For more details on this topic, please refer to the extended explanation provided in the official Primereact documentation - Docs

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The Rollup module is unable to locate the 'jquery' file

I've been facing an issue while trying to bundle a vuejs single file component using rollup. The error message that keeps popping up is Module not found: Error: Can't resolve 'jquery'. Despite spending countless hours on this problem, I ...

Having difficulty specifying numerical entries only

I have been attempting to create an input field that only accepts numbers, but for some reason it still allows letters to be entered. Why is this happening? <input type="number" pattern="[0-9]" ...

Aligning an image within the layout of a Ghost theme

I'm currently using Ghost's free Starter theme and I'm attempting to center an image that is wider than the paragraph and main element (60rem). These are the key CSS elements that control the positioning of the image. I can achieve full wid ...

Having trouble getting images to appear in CardMedia in Material UI?

I need to have an image displayed in the header using the following code: <Toolbar className={classes.toolbar}> <IconButton className={classes.menuButton} color="inherit" aria-label="Menu"> <MenuIcon /> </IconButton> ...

Looking for repeating values in inputs excluding this one

In the midst of a medium-sized project, an issue has arisen. I have condensed the core problem into this code snippet. Here's what the code does: $(".6").focusout(function(){ if( $(".6").filter(function(){ return this.value;}).not(this).length>0 ...

The React Js error message shows an 'Uncaught (in promise)' TypeError that prevents reading an undefined property

Struggling with passing the response from an Ajax request to another function in React. Although I am able to receive the response, I cannot pass it to { this.showBattersData(data); } where I need to render the DOM. It's clear that something is missin ...

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Currently, I have two separate Divs - one displaying temperature data and the other showing humidity levels. <div class="weatherwrap"> <div class="tempwrap" title="Current Temperature"> ...

Executing a Select Change in a React Application using CasperJS

Has anyone else encountered difficulties with this issue? I have a basic React page set up, with a simple component that renders a select element and triggers a callback function when the value changes. Here is the basic structure of the component: const ...

Unable to send form data to app.js

Although a similar question has been asked before, I haven't been able to find a solution that works for me. I've been attempting to send HTML form data to my app.js file. Below is my index.handlebars file: <form method = 'post' a ...

Tap the image to open it in a new window for a closer look

After retrieving data from the database, which includes images and other fields, I am trying to figure out how to make it so that when users click on an image, it opens in a new window. Below is the code snippet I have: <a target="_blank" href="#"> ...

Navigating through object keys in YupTrying to iterate through the keys of an

Looking for the best approach to iterate through dynamically created forms using Yup? In my application, users can add an infinite number of small forms that only ask for a client's name (required), surname, and age. I have used Formik to create them ...

The webpage is not displaying any results despite using .innerHTML with Ajax

I am currently developing a web application that displays query results using the Google Books API. While my code is functioning, I am encountering an issue where the .innerHTML method does not show any results on the HTML page. Below is the HTML code bein ...

Ways to trigger a function once all elements have been successfully mounted

Currently, I am incorporating VueJS with the Vue Router and a JavaScript uniform module to enhance the appearance of select boxes, checkboxes, and other form elements by wrapping them in a new element for better styling options. How can I efficiently appl ...

Why is the Bootstrap tooltip flickering and not closing on mouseout? And why are duplicate entries not being triggered?

I'm facing some issues with the code I have here: Check it out The problems are as follows: Flickering - When hovering over the images slowly, there is noticeable flickering in the tooltip box rendering 2-3 times. This seems to be related to the cla ...

Newbie mishap: Utilizing an array retrieved from a function in javascript/jquery

After submitting the form, I call a function called getPosts and pass a variable str through it. My aim is to retrieve the data returned from the function. // Triggered upon form submission $('form#getSome').submit(function(){ var str = $("f ...

Angular Material's Expansion Panel Alignment

I am currently facing an issue with aligning the icon to the left side of the expansion panel and centering the title. I've tried using CSS with text-align but it's not working as expected. Any advice or suggestions would be greatly appreciated, ...

Adjust the height setting of the React-Highcharts viewport

My initial configuration for highcharts looks like this:- function getInitialHighChartsConfig(chartType) { return { credits: false, chart: { type: chartType, height: 325, }, title: { text: '', useHTML: tr ...

Requesting information from a NodeJs endpoint

I have a NodeJs application that requires calling an end-point (http:\localhost:9900\get\employee - asp.net web-api) to retrieve data. What are some options available for achieving this task? Is it possible to utilize promises in this scenar ...

What could be causing input to be blocked in certain situations while using my Angular directive with compile function?

Recently, I created a directive that adds a class based on a certain condition. You can find the code snippet at the end of this question. The directive functions as expected in a simple use case where it's applied to a required field: <input typ ...

Leverage the Express JS .all() function to identify the specific HTTP method that was utilized

My next task involves creating an endpoint at /api that will blindly proxy requests and responses to a legacy RESTful API system built in Ruby and hosted on a different domain. This is just a temporary step to transition smoothly, so it needs to work seam ...