Styling react-select component with CSS className in Reactjs

Question

I'm using react-select and I'm trying to style the Select component like written in the DOCS but adding a class with className does not work. The class tag is added to the DOM element's classes but doesn't affect the element itself. The theme stay the same.

If I add a class like this:

<Select
    className='my-class'
    {...selectProps}
/>

The DOM element looks like this:

<div class="my-class css-2b097c-container">
...
</div>

Which means that the default class css-2b097c-container of react-select will always "override" my custom class. I've tried to use the classNamePrefix option but did not work either :(

In order to keep my UI design complete I need to design it with classes and not with inline styling!

Answer 1

classNamePrefix works for most but not all components which is kinda annoying to me. Another solution is to add your own className as stated in your question but refer to both of them in your css using [attribute*=value] selector to increase specificity.

<Select
  className="mySelect"
  options={options}
/>

.mySelect[class*="-container"] {
  background-color: lemonchiffon;
  padding: 10px;
}

Live Example