Possible to change font color on react-select (ReactJS)?

Question

I have a button that when clicked, all the content is transparent.

Is it possible to manually set the text color ? Not background color !

I want black color on my font not transparent.

My Code:

import React from 'react';
import DatePicker from "react-datepicker";
import Select from 'react-select';

import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];



class Test extends React.Component {

    state = {
        startDate: new Date(),
        selectedOption: null,
    }

    constructor() {
        super();

        this.state = {

        };
    }

    handleChange = date => {
        this.setState({
            startDate: date
        });
    };

    handleChange = selectedOption => {
        this.setState({ selectedOption });
        console.log(`Option selected:`, selectedOption);
    };

    render() {
        const { selectedOption } = this.state;

        return (

            <div className="grid-container">
                <DatePicker
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                    dateFormat="yyyy-MM-dd"
                />
                <Select
                    value={selectedOption}
                    onChange={this.handleChange}
                    options={options}

                />
            </div>
        );
    }
}


export default Test;

I tried to manually adjust the colors through this link But without success !

I want the data to be in black letters on a white background when I click the button.

Answer 1

react-select is built in a way you should use CSS-in-JS and not css like describe here: https://react-select.com/styles.

Then you will be able to use some styling props like:

const customStyles = {
  option: provided => ({
    ...provided,
    color: 'black'
  }),
  control: provided => ({
    ...provided,
    color: 'black'
  }),
  singleValue: (provided) => {
    ...provided,
    color: 'black'
  }
}

And so on.

Answer 2

You can find the class you want to target this way: in the browser element inspector find the element and find its class. You can that modify its class by adding:

.putElementClassNameHere {
 color: black !important;
}

You might need !important for the style to be applied.

Answer 3

react-select v5.2.2 gives the following style keys which we can use to style different parts of UI using css

• clearIndicator
• container
• control
• dropdownIndicator
• group
• groupHeading
• indicatorsContainer
• indicatorSeparator
• input
• loadingIndicator
• loadingMessage
• menu
• menuList
• menuPortal
• multiValue
• multiValueLabel
• multiValueRemove
• noOptionsMessage
• option
• placeholder
• singleValue
• valueContainer

Now lets say you want to change the font color of selected option (see the img below)

now what you have to do is you need to find the right **style key** from above and write a custom css function that's all.

you can use dev tools to inspect elements and easily find the style keys!

const customStyles = {
    singleValue:(provided:any) => ({
      ...provided,
      height:'100%',
      color:'#08699B',
      paddingTop:'3px',
    }),
  }

<ReactSelect
  styles={customStyles}
/>

It took me some time to figure this out, hope it helps you and save your time to understand this.