I am newbie in Angular, do not blame me if something I explained wrong ...
I have started learning of Angular and faced with the problem:
How to separate style of my component from default style in Web App ?
It is useful when you find a nice Angular Component on the Web, copy it in your application and it looks like as was intended.
I have found on the Web that something like this possible with:
encapsulation: ViewEncapsulation.Native
But seems it doesn't work ...
Is there any solution for such case ?
Related
I am learning react in which I am making components and making css file for each component but if I make a className lets say "temporary" then if I make another component and while I am not importing the previous component's css file but then also if i give the class "temporary" to any other element of this component then also it take the css styling. Why is this happening I don't know.
You create multiple CSS files and several components in your React project and connect them if needed.
But this is what you see, not what happens.
React actually converts all your CSS code into a file and then outputs it.
This is also true for components.
You create dozens of CSS and JS files, but React creates two files for you.
In Recycling, we only create a few files to write more readable code.
If you have a problem with this, you can research the module.css in React and use it to prevent this from happening to you.
Again, if you have any questions about this, I am at your service.
I have had a big problem for some time now.
I'm working on ReactJS with Material-UI, I have a library (which I build with webpack) and then use it on my projects.
The problem is that in local or on StoryBook, the style renders perfectly well. But when the library is built and added to my project via my package.json my style does not apply.
I override the style directly on my css file and I don't go through withStyle/useStyle/makeStyle. I know this is the right way to do it but unfortunately the project was already like that when I got it back
On StoryBook:
And prod:
If anyone has a solution or has seen this somewhere?
Thanks
I am building a Liferay Angular portlet that uses angular material inputs and some inputs are not rendering well at all. I am guessing that some CSS/JS is missing, but I can not figure it out what exactly.
My styling css file looks like this:
#import "~#angular/material/prebuilt-themes/deeppurple-amber";
Also, when I inspect with Developer tools, I see the following warning:
Could not find Angular Material core theme. Most Material components may not work as expected.
I have also tried referencing the css file from the AppComponent with styleUrls: ["/o/<my-portlet_name>/lib/app/styling.css"], but without any luck.
So, my question is - How to reference a CSS file within an Angular Portlet in Liferay ?
I have read over and over again this article and finally I made the following changes:
changed the styling.css file into styling.scss
changed its content to #import "../../../../../node_modules/#angular/material/prebuilt-themes/deeppurple-amber"; - I am not sure why are necessary 5 of ../, I was expecting that by using ~ to know where node_modules folder is
added the following line in the property attribute of the #Component annotation in my Portlet: "com.liferay.portlet.header-portlet-css=/lib/app/styling.css" - yes, the extension is .css and not .scss
I've built an Aurelia plugin and I'm using some styling there. My problem comes when I want to use this plugin in my existing Aurelia app. The styles are imported at the head so all my Aurelia application is using them.
I've seen the Shadow DOM functionality, the problem is I'm using Bulma so I need the individual components to get styles from Bulma, but at the same time, I don't want the rest of my Aurelia app to get those styles from Bulma.
I don't know what the best option is, so I'd appreciate some help here.
Thanks.
In my app I have 3 components.
AppComponente with <router-outlet></router-outlet> to route to Frontend or Backend components.
My problem is that the Frontend.component and Backend.component has diferent CSS's ... but when I RELOAD one of them, something strange happens and the CSS of the other component dont work.
I try to use encapsulation: ViewEncapsulation.None and Native/Emulated in many combinations but, the problem still happen.
Is a wrong pratice build 2 modules in one application ? Backend and Frontend ?
I'm very confuse now.