search

vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
903 stars 97 forks source link

v4 improvement: scoped styles #312

Closed R1ze13 closed 1 year ago

R1ze13 commented 1 year ago

Is your feature request related to a problem? Please describe.

Hi, first of all I want to say thanks for the good library. I tried to upgrade to version 4 in an existing project and encountered an inconvenience: In version 4, I can't style the component with scoped styles because the VueFinalModal component uses regular styles and there are no data attributes for scoped styles in the markup. In a project that mostly uses just scoped styles, this becomes a big inconvenience, because some of the styles just don't work and it's not immediately clear why and even more, how to fix it.

A simple example: I have some basic modal window. I want to add a new modal window, which must have a non-standard width. To do this, I add a separate css class and encounter a situation when the rule for this class doesn't work

Describe the solution you'd like

I propose to make VueFinalModal and other components always use scoped styles by default. This would help people like me who always try to use scoped styles, but at the same time it wouldn't hurt people who use regular styling, because they could use special selectors https://vuejs.org/api/sfc-css-features.html#scoped-css

Describe alternatives you've considered

Use a mix of scoped styles and regular styles. Unfortunately, this is a huge discomfort due to the fact that every developer now needs to understand when and what styles to use. This is an additional cognitive load, which I would like to avoid

Additional context

Screenshot of the markup. Perhaps this will help you understand the situation I'm talking about https://snipboard.io/gFHXP7.jpg

JackEdwardLyons commented 1 year ago

I agree, this would be super helpful

hunterliu1003 commented 1 year ago

Thanks for your feedback!

I tried to use scoped styles in VueFinalModal, but it doesn't solve the issue (See bd2712e). I found this issue from vue 3: https://github.com/vuejs/core/issues/2669#issuecomment-734434188, and you can see this CodeSandBox It seems an issue from the Teleport, and VueFInalModal is based on the Teleport component. So I think currently we have no way to improve this.

R1ze13 commented 1 year ago

Thanks for your feedback!

I tried to use scoped styles in VueFinalModal, but it doesn't solve the issue (See bd2712e). I found this issue from vue 3: vuejs/core#2669 (comment), and you can see this CodeSandBox It seems an issue from the Teleport, and VueFInalModal is based on the Teleport component. So I think currently we have no way to improve this.

Thanks for your reply. I came up with a little hack. This is not a very good solution since we are looking at private vue fields, but it works. I'm not sure that this can be included in the library, but maybe you can find a better solution or make it more beautiful. Here is your sandbox, but improved a little :)

hunterliu1003 commented 1 year ago

This issue is closed because I still can't find any solution to improve it.