React-Select Styling issues Simplified

The react-select package is really good. It offers a lot of things while you are building your UI for a dropdown/select list. The basic functionality works absolutely perfect but the pain point arises when you want to style the particular select tag. It will be a real pain and you will end up spending a lot of time. So I thought to simplify the docs a little little bit.

The docs gives you a picture about styling your select tag but it is too confusing and you will not have an idea which tag to be selected to customize what.

So here is an example of what all the different tags are there

React-Select

Here is a simple select tag what comes out of the box

Select Option

This works fine but if you want to suite your application then you need to change the customization which I will be talking here

I have divided into 3 sections which I feel was the most important but there are other styles as well which you can incorporate for your liking.

1. Option Tag 2)Selected Value 3)Dropdown List

So we will start with the Option tag and try to add some CSS changes

So the option tag represents the select tag and if you want to edit any css you need to change the values in the control. One more thing is the package gives you style component and you need to update those values over there in that particular style component only and then you can link those styles to the styles in the Select component tag. easy peasy.

Now we will work on the selected value i.e., 2part give the values for multiValue and it can be changed accordingly.

No we will change the dropdown thing and for this we need to change the options tag

So by these 3 tags you can modify your css for your react-select. There are other options as well to explore. Happy Coding.

Please give the comments if anything more need to be added. Thanks