How can I avoid this kind of conflict?
MassMessage opened this issue · comments
First of all, thanks for such awesome library! my issue is I'd like to use this library to style a specific (React) component but it's changing everything else in the application, including the main page's default scrollbar and the tab component I'm using. for example the tab look like this:
instead of this:
the code to generate this tab look like this. I believe most part of conflict could be solved using unique name to classes? maybe adding the library name prefix or something...
Hi @MassMessage, this framework does not rely much on classes, but it instead styles your HTML elements directly using semantic tags & accessibility attributes. Therefore it may not coexist well with any other styling systems.
In your use case, if you just want this framework to style only certain components, you may want to find a suitable approach to scope it instead of importing this framework globally.
Hi @MassMessage, this framework does not rely much on classes, but it instead styles your HTML elements directly using semantic tags & accessibility attributes. Therefore it may not coexist well with any other styling systems.
In your use case, if you just want this framework to style only certain components, you may want to find a suitable approach to scope it instead of importing this framework globally.
Do you have any suggestion how to scope it? I get to know styled-components and I'm trying to figure out how to use it with third-party frameworks
After a few hours of digging, I would actually take back my earlier suggestion, there's no way to scope it (the only way that seems viable is to use this react-scoped-css but it is by no means easy to set up, so let's just ditch that).
I will try to figure out a way to provide an option to scope it, may probably end up using a class prefix as you suggested or something similar.
After a few hours of digging, I would actually take back my earlier suggestion, there's no way to scope it (the only way that seems viable is to use this react-scoped-css but it is by no means easy to set up, so let's just ditch that).
I will try to figure out a way to provide an option to scope it, may probably end up using a class prefix as you suggested or something similar.
It seems there's a workaround with scss... something like this:
@use "sass:meta";
.container {
@include meta.load-css("./baa");
}
it does scope the rules in the baa file. I couldn't make it work with 7 framework yet (i'm getting a include error(gonna open an issue in their repo), it's searching for the 7.css's resoruce fiels, such as button-down.svg in the src dir instead of 7.css's dir; but copying all the files from 7.css's dir to src folder seem to work, at least I got the expected behavior as in my initial topic). I'm not sure tho if there are plans to keep meta.load-css in scss tho as @import (url) is getting depreciated.
Ah yep, that could also be a workaround, wasn't sure if you were willing to dig into the SCSS approach so I didn't mention it, but still, the problem with icon path is there if you use this.
Ah yep, that could also be a workaround, wasn't sure if you were willing to dig into the SCSS approach so I didn't mention it, but still, the problem with icon path is there if you use this.
This approach with scss was the only one I could find lol I didn't it would be so hard... even style-components, form what i saw, didn't solve it. Do you have any idea how solve this include issue tho? so far, no luck with that
edit: to anyone with same issue, this load path algorithm just pass the path to webpack's resolve so setting resolve.modules does solve the issue.
I published a new release (v0.6.0) that addresses this topic so that you won't have to go through so much pain to config or setup. Instructions can be found on the documentation page, a React example can be found here.
I published a new release (v0.6.0) that addresses this topic so that you won't have to go through so much pain to config or setup. Instructions can be found on the documentation page, a React example can be found here.
thank you very much!! :D I feel like the setup was getting a bit hacky and messed, that helped to clean up things. I'm using the v0.6.0 already
No problem, happy to help :)