unable to overwrite css styling

[peters313]

Currently having an issue with being able to add the custom styling to the popover in the containerStyle prop to have the correct positioning. Some of the styles will take effect like z-index but others like left or top will not.

   <div>
        <div>
          <i
            ref={(node) => { this.target = node }}
            onClick={this.handleClick}
            className="icon-star-empty secondary"
          />
        </div>
        <Popover
          placement="bottom"
          containerStyle={{ zIndex: 5, top: 'auto', left: 'auto' }}
          style={{ width: '500px', boxShadow: '-5px -3px 31px 4px #888888' }}
          target={this.target}
          container={this}
          show={this.state.isOpen}
          onHide={this.handleClose}
        >
          <ReduxFavoriteFormContainer
            initialValues={favorite}
            onClick={this.handleClick}
            onSubmit={addFavoriteStart}
          />
        </Popover>
      </div>

[Ismail Demirbilek]

Its css you write. There is no effect of left: auto.

[Gal Bracha]

Also you have a typo in zIndex instead of z-index