React-select: Background of options is transparent

[AtulKondekar]

Background of options is transparent

````

{ this.setState({ parentComboValue: event.value, parentComboLabel: event.label }) }} options={this.state.parentCombo} clearable={false} style={{backgroundColor:'#fff'}}> {this.state.parentComboError}

````

[AlessandroAnnini]

any news about it?

[AlessandroAnnini]

@AtulKondekar I think I have the solution:
you only need to override the .Select-menu-outer z-index property with the value you need.
Currently z-index in that class is 1.

[damianobarbati]

@sun2rise I have the same problem: how did you solve? Can you post a snippet about overriding the class you mentioned?

I'm using jss but docs mention how to pass "styles" and not "classes".
I tried both:

• <Select menuContainerStyle={{ zIndex: '100 !important' }} ... but the style seem to not be applied: hard to debug since once I click outside on the developer console to inspect the element, the blur action removes it away from the DOM :)

• applying global classes but I guess is useless: JSS renames classes!
  ``` '@global .is-open': {
  zIndex: '100 !important',
  },
  '@global .Select-menu-outer': {
  zIndex: '100 !important',
  },

- using className={classes.select} where select is:

select: {
    '& *: {
        zIndex: '100 !important',
    },
    '& .Select-menu-outer': {
        zIndex: '100 !important',
    },
    '& .Select-menu': {
        zIndex: '100 !important',
    },
    '& [role=listbox]': {
        zIndex: '100 !important',
    },
},

@JedWatson in the docs I see `import 'react-select/dist/react-select.css';` but I have not css file in the dist folder!

Here what I'm seeing.
<img width="359" alt="screen shot 2018-05-09 at 09 52 15" src="https://user-images.githubusercontent.com/2225869/39802588-bb217ade-536e-11e8-9ee6-03b93aa5ddda.png">

This happens when the select is inside an header with the following styles (jss):

position: 'fixed',
zIndex: 1,
```

[AlessandroAnnini]

Hi @damianobarbati, sorry for the delay

you can create a reactSelectFix.css like this:

.Select-menu-outer {
  z-index: 100 !important;
}

and then you can load this rule where/when needed like this:

import './reactSelectFix.css';

without using andy className or inline js css

[damianobarbati]

@sun2rise thanks but it does not work.

[AlessandroAnnini]

@damianobarbati which version are you using?

[devjones]

For version 2, you need to style the menu component

    const selectStyles = {
      menu: base => ({
        ...base,
        zIndex: 100
      })
    };

Then you can reference the Select component via:

<Select styles={selectStyles}>

[AtulKondekar]

Thanks guys above solution worked for me