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

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.

Answer 3

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.