React-modal: How to reset the styles.

[JonDotsoy]

[diasbruno]

@JonDotsoy Hi, what do you mean by reset?

[JonDotsoy]

yes, but only the styles.

I,ve the next script to reset the estyle.

const resetModalStyle = (() => {
  // Styles
  const initial = null

  const overlay = {
    position: initial,
    top: initial,
    left: initial,
    right: initial,
    bottom: initial,
    backgroundColor: initial,
    WebkitOverflowScrolling: initial,
    zIndex: initial,
  }

  const content = {
    position: initial,
    top: initial,
    left: initial,
    right: initial,
    bottom: initial,
    border: initial,
    background: initial,
    overflow: initial,
    borderRadius: initial,
    outline: initial,
    padding: initial,
  }

  return {overlay, content}
})()

Exists any prop to this same.

[diasbruno]

You can override the styles using:

<Modal {...other_props} style={resetModalStyle()}>
  ...
</Modal>

The object returned by your function is correct.

[diasbruno]

Look at react-modal#styles for more information.

[JonDotsoy]

In effect, solve it with:

<Modal style={resetModalStyle}>
   ...
</Modal>

[JonDotsoy]

Is possible added a noStyle prop to use the style from CSS? This in a next feature?

Example:

<Modal noStyle={true}>
   ...
</Modal>

[diasbruno]

This would grow the interface of the component.
We would end up with 2 places to set styles (styles : object, noStyle : Bool) which increases complexity.

For now, it's better for the user to provide the zero style.

[JonDotsoy]

Something similar to this.

<Modal style={Modal.zeroStyle}>
   ...
</Modal>