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!

@SarunUK I did think about it but it's not an ideal solution because it's not always working and not the most compatible :( thanks — user12499410
– user12499410, Commented Oct 2, 2020 at 9:49
Prop className will replace the SelectContainer with the className's value. please check the style guide for more information. react-select.com/styles — Muhammad Haris Baig
– Muhammad Haris Baig, Commented Oct 2, 2020 at 11:35

NearHuscarl · Accepted Answer · 2020-10-02 11:46:37Z

4

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

answered Oct 2, 2020 at 11:46

NearHuscarl

83.1k24 gold badges321 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Siva-Dev-Wizard Over a year ago

Thank you very much. Though I thought it could be this way you saved my work time :)

rimraf Over a year ago

Thank you. I shoulda looked this up about 2 hours ago... smh.

Collectives™ on Stack Overflow

Styling react-select component with CSS className in Reactjs

1 Answer 1

Live Example

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Live Example

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related