React-modal: Passing default styles (preset) and adding customization

[kinucris]

Summary:

using styled components i imported react-modal into my style.js i export it under a new name and even without passing any styling it loses the default styling

Steps to reproduce:

1. Import react-modal into your style.js (styled component) component
   eg.

   import ReactModal from 'react-modal';

2. Create const with desired name of type ReactModal
   eg.

   export const ModalLog= styled (ReactModal) <Nothing Here>;

3. Import your style.js to your index.js
   eg.

   import {ModalLog} from './styles';

   1. Ready! Verify that it works, but without any standard styling.

Expected behavior:

It would be expected that it would continue to function as if I were not using or using Styled-Component, with the standard, responsive layout, centering the content, beautiful.
Work without _Styled-Component_:
https://codesandbox.io/s/react-modal-issue-template-rwuqw?fontsize=14&hidenavigation=1&theme=dark

Link to example of issue:

Example with Styled-Component:
https://codesandbox.io/s/still-glade-gn43j?fontsize=14&hidenavigation=1&theme=dark

Additional notes:

Maybe the problem is with Styled-Component that is replacing the default values ​​of the element?

[fabb]

I have a similar issue. I think the problem is that using styled just creates a css class and passes it via the className prop (similar to how the css prop works). The problem is that when passing className to react-modal, it ignores the default styles. From the documentation:

If you specify className, the default content styles will not be applied. Likewise, if you specify overlayClassName, the default overlay styles will not be applied.

https://reactcommunity.org/react-modal/styles/classes/

[kinucris]

I have a similar issue. I think the problem is that using styled just creates a css class and passes it via the className prop (similar to how the css prop works). The problem is that when passing className to react-modal, it ignores the default styles. From the documentation:

If you specify className, the default content styles will not be applied. Likewise, if you specify overlayClassName, the default overlay styles will not be applied.

https://reactcommunity.org/react-modal/styles/classes/

Exactly!
I agree with you, it replaces the standard style.
I try to use the same name as the original styles in the react-modal documentation, but it doesn't work either; Maybe I'll create a problem report on the Stylish Components page, what do you think?

[fabb]

Currently I don‘t use the className to do stylings, so I don‘t really know if it‘s broken or a usage problem. Maybe StackOverflow?