This question already has an answer here:
How to update styles of Angular Component dynamicaly
(1 answer)
Closed 2 years ago.
i am having a peculiar scenario in which i need to override the existing classes i defined in the angular component's scss file. Based on the scenario, i will get different styles from the api. Those styles will will have class name of that component with updated styles. I need to update that component and override the existing styling. I cannot use ngclass or ngstyle for this, as i will be getting an string of all the classes in the component with some updated styles. This will be unique for a component i.e each component should override the existing styles defined in its individual stylesheet. How do i override the entire individual style of an component.??
Thanks in Advance.
Two approaches:
1) Add .initial-styles class to component, take it off when your API call returns and apply your lazy styles.
2) Generate .css bundles in your service, Add .initial-styles class to component, all the right .css asset from your component and remove .initial-styles class
Explanation:
1) Here's a working demo for this first approach.
Add .initial-style rule that contains all other rules in your .scss
When you API returns execute:
this.renderer.removeClass(this.d.nativeElement, "initial-style"); to remove the styles. then apply your new styles via this.renderer.setStyle(this.d.nativeElement, styleProperty, styleValue);
Notice that if your .css API response is just a string like this:
container-style {color: 'red'} .header-style { color: 'yellow' }
then you'll need to do a a little bit of parsing. #Ram suggested this
https://github.com/angular/angular/issues/36911 proposal to ease the parsing.
2) Following the first approach add .initial-styles class, take it off when you call your .css asset, and then just add the name of the classes via this.renderer.addClass(this.d.nativeElement, "myclass");
Related
I've created a web component using Vue2 & Vuetify2 and it's working almost flawlessly bar a few websites where there are CSS clashes.
The problem is that the web component is not in a shadowDOM and as much as I've tried getting this to work, it just doesn't (seems the issue lies with Vuetify + shadowDOM).
As an alternative, would it be possible to change or prepend to class names to stop CSS conflicts?
For example row is a typically used class name. Would it be possible to prepend either widget, .widget or #widget to all other classes & id's?
Demo of the widget.
I added Tailwind CSS to our company project. It's a 5-6 years old codebase and it's already using bootstrap CSS + custom bootstrap theme.
My tailwind JS config file looks like this:
tailwind.config.js
I have added a custom prefix in order to avoid class conflict and also applied !important to all of the tailwind classes.
And I need to override the specificity of those selectors.
How could I achieve this using tailwind CSS?
specific class selectors that need to be override
Please dont't post images of code, just use the code tags available in the editor!
What you could do is overwrite those selectors manually in your tailwind css file which i guess is loaded AFTER the bootstrap file?
The order of css evaluation is key here.
If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one. BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.
I have a component folder and two different components in it, every component has its own css file with the link in its jsx file.
:
when I use a the same class name in them it affects the other component too! While the other component has its own css file and link.
Why is that?
For example:
In both components I have a class named: "PlayerPhoto"
when I change its height and width, the photo in other components (with separate css file but the same class name) would change too!
It happens because your css is imported simply as normal css - without unique identificator. You need to specify classes with unique names or have a look at Css Modules which solve this problem and creating unique classes automatically
Or you can use libraries as EmotionJS or styled-components
Your app.js file may has the property for the className="PlayerPhoto", make sure that your app.css has not the same className if there were, then it overwrite your component base css.
You can also use inline css, to overcome this type of issues.
What would be great is if I found a way to change the contents of a <style> block in my Vue component with some Vue variables.
The common question and answer around this involve using in-line styles, or using javascript to access a .style property, but I wish to change slider tracks and pseudo elements much like this question here: .slider::-webkit-slider-thumb needed in javascript
If the official Vue position is that <style>s are static, etc - does anyone else wish they had some system like <style scoped dynamic> where the contents of the style sheet can be controlled by Vue?
I am able to get working results per this answer (How to override scoped styles in Vue components?) with the parent component using a non-scoped which has selectors that overtake the importance of the child component's styles.
As the answer said, using "#app" as the start of the selector does the job - the stumbling block for me was simply adding a non-scoped style block to the parent component.
However it isn't so versatile and I'm looking to learn what "putting styles into JS" means and whether it would also provide the method to override the pseudo-element styles.
I have css class which needs to be added to three different component(for example) which might not require for other components of our application.
which one would be the best approach.
add that css class to style.css (global css)and use it or
add it to three different component specific style sheet as it is not used anywhere in the application(is this considered as code duplicate ?)
Thanks!
I would say that adding it to the global styles is just fine for this purpose. View encapsulation is cool, but the cascading part of CSS is still something that we're supposed to take advantage of...just as long as you're still cognizant of keeping styles organized and not too high of specificity.
Conversely, if you knew all three components would share parent component, you could turn off view encapsulation for that component and add the class there, which is essentially the same as adding to global styles with the difference being the style would only be loaded when the component is loaded.
You could also use ::ng-deepon a parent component to target its children. Sass brings other solutions, but it doesn't look like you're using .scss files.