CODEWITHSUNDEEP
react-select
Hashibuto
Hashibuto

Reputation: 776

How can I re-style the search text color?

I am using the react-select v2 component and am having difficulty restyling the input text for the search portion of the component.

Here is the component itself:

<AsyncSelect value={this.props.value} onChange={this.props.onChange} isSearchable options={ this.state.options } onInputChange={this.onInputChange} styles={styleSheet} />

Here is the stylesheet:

const styleSheet = { input: (base, state) => ({ ...base, color: "red" }), };

This seems to have no effect on the text color, though I'm unsure as to why. Any insight would be greatly appreciated. Thanks.

Edit: I can see in components/Input.js that there is no support for "color":

const inputStyle = isHidden => ({ background: 0, border: 0, fontSize: 'inherit', opacity: isHidden ? 0 : 1, outline: 0, padding: 0, });

In which case would this need to be a feature request, or is there some alternate way of applying this?

Upvotes: 1

Views: 3276

Answers (2)

Luis H
Luis H

Reputation: 11

I had to add the CSS rule !important because without that the code doesn't work for me.

const customStyles = {
  input: (styles) => ({
    ...styles,
    '[type="text"]': {
      color: 'white !important'
    }
  })
};

Upvotes: 1

Lucas
Lucas

Reputation: 56

const styleSheet = {
  input: (base, state) => ({
    ...base,
    '[type="text"]': {
      fontFamily: 'Helvetica, sans-serif !important',
      fontSize: 13,
      fontWeight: 900,
      color: 'green'
    }
  })
};

And then later in your render method: 

<Select styles={styleSheet} />

Upvotes: 4

Related Questions