z-index value not handled correctly

[phaedryx]

Consider:

class Foo extends Component {
  render() {
    var modalStyles = {overlay: {}};
    modalStyles.overlay["z-index"] = 10;

    return(
      <Modal style={ modalStyles }>
        Hello World!
      </Modal>
    )
  }
}

This will produce a modal with a z-index of "10px", which is not a valid z-index value.

[deiga]

As a workaround set modalStyles.overlay["z-index"] = '10;';

[marbemac]

It should follow react conventions:

class Foo extends Component {
  render() {
    var modalStyles = {overlay: {zIndex: 10}};

    return(
      <Modal style={ modalStyles }>
        Hello World!
      </Modal>
    )
  }
}

[kendagriff]

@marbemac Thanks for the tip!

[phaedryx]

@marbemac I should have realized that. Thanks for the example.