jss syles for the dropdown for react

Question

I am trying to style my place holder
instead of using css I am using JSS.
so I googled and found this link Styling the placeholder in a TextField
I tried with !important too but its not working.
can you tell me how to fix it.
providing my code snippet and sandbox below

https://codesandbox.io/s/react-codesandboxer-example-ntz22

const styles = theme => ({


  input: {
    // padding: 0,
    "&::placeholder": {
      //  fontSize: '14 !important',
      color: "blue !important"
    }
  }
});

class SingleSelect extends Component<*, State> {
  state = {
    isClearable: true,
    isDisabled: false,
    isLoading: false,
    isRtl: false,
    isSearchable: true
  };

  toggleClearable = () =>
    this.setState(state => ({ isClearable: !state.isClearable }));
  toggleDisabled = () =>
    this.setState(state => ({ isDisabled: !state.isDisabled }));
  toggleLoading = () =>
    this.setState(state => ({ isLoading: !state.isLoading }));
  toggleRtl = () => this.setState(state => ({ isRtl: !state.isRtl }));
  toggleSearchable = () =>
    this.setState(state => ({ isSearchable: !state.isSearchable }));
  render() {
    const {
      isClearable,
      isSearchable,
      isDisabled,
      isLoading,
      isRtl
    } = this.state;
    return (
      <Fragment>
        <Select
          className="basic-single"
          classNamePrefix="select"
          // defaultValue={colourOptions[0]}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={colourOptions}
          placeholder={"2 testing here."}
        />
      </Fragment>

score 0 · Answer 1 · answered Dec 13 '19 at 15:42

The link you've found is for the Material-UI <TextField/> but you're using React Select.

React select has a styles property which accepts a paceholder method to return the placeholder styles like this:

<Fragment>
  <Select
    className="basic-single"
    classNamePrefix="select"
    // defaultValue={colourOptions[0]}
    isDisabled={isDisabled}
    isLoading={isLoading}
    isClearable={isClearable}
    isRtl={isRtl}
    isSearchable={isSearchable}
    name="color"
    options={colourOptions}
    placeholder={"2 testing here."}
    styles={{
      placeholder: () => ({
        color: 'blue'
      })
    }}
  />
</Fragment>

jss syles for the dropdown for react

1 Answers1