reactjs - 可以在 react-select (ReactJS) 上更改字体颜色吗？

Question

我有一个按钮，单击该按钮时，所有内容都是透明的。

是否可以手动设置文本颜色？不是背景色！

我希望我的字体上的黑色不透明。

我的代码：

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;

我尝试通过此链接手动调整颜色但没有成功！

当我单击按钮时，我希望数据在白色背景上以黑色字母显示。

标签： reactjsreact-select

Answer 1

react-select以您应该使用的方式构建，CSS-in-JS而不是css像这里描述的那样：https ://react-select.com/styles 。

然后您将能够使用一些样式道具，例如：

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

等等。