overlay-layout.scss affecting global styles

[nolazheng]

What is actually happening?

The overlay-layout.scss file is being applied globally throughout the project during development. If not disabled or managed properly during development, it causes unwanted global styles to be included in the final build, leading to potential style conflicts and layout issues across different components.

What is expected?

The overlay-layout.scss file should be scoped or conditionally included, so it doesn't affect the entire project globally, especially in the final production build. It should only be applied when necessary and not interfere with the styles of other components.

Reproduction steps:

1. Include overlay-layout.scss in the project globally.
2. Observe the global impact on all pages and components during development.
3. Build the project for production.
4. Check the output CSS file to see that the styles from overlay-layout.scss are still included, affecting the entire application.

[motea927]

Hi @nolazheng, thank you for bringing up this issue.

The fix has been released in v1.2.2. If you encounter any further issues or have any questions, feel free to reach out.

Thanks again!

[nolazheng]

Hi @motea927, thank you for fixing the issue! I tested the new version and found that css is all fine now.

I also found that adding an additional zIndex in layoutPreview is required for new version to work properly.

 OverlayLayout({
        /* options */
        layoutPreview: {
          style: {
            position: 'absolute',
            margin: 'auto',
            inset: '0',
            width: '16.2rem',
            height: '6.6rem',
            zIndex: 999, // <--- this
          },
        },
      }),

Perhaps it would be worth considering an update to the documentation or include the CSS separately. Thanks again!

[motea927]

Hi @nolazheng,

After merging PR #13, the layout preview lost its default styles. This issue has been addressed in PR #16 and is included in the latest release: v1.2.3.

Thanks for your feedback!