可以更改 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;

I tried to manually adjust the colors through this link但是没有成功！

我希望点击按钮时数据为白底黑字。

Answer 1

您可以通过这种方式找到您想要定位的 class：在浏览器元素检查器中找到该元素并找到它的 class。您可以通过添加以下内容来修改其 class：

.putElementClassNameHere {
 color: black !important;
}

您可能需要 !important 才能应用样式。

Answer 2

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'
  }
}

以此类推

Answer 3

react-select v5.2.2 提供了以下 样式键 我们可以使用 css[= 来为 UI 的不同部分设置样式14=]

clearIndicator
容器
控制
下拉指示器
组
组标题
指标容器
指标分隔符
输入
loadingIndicator
loadingMessage
菜单
菜单列表
菜单门户
多值
多值标签
多值删除
noOptionsMessage
选项
占位符
单值
值容器

现在假设您想更改所选选项的字体颜色（请参见下面的 img）

现在你要做的是你需要从上面找到正确的 **style key** 和编写一个自定义 css 函数就可以了。

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}
/>

我花了一些时间才弄明白这一点，希望它能帮助你并节省你理解这一点的时间。

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

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

reactjs

react-select