I come form an Angular background. In Angular, you have a global styles. When you overwrite the same classes in your component's styles, then it gets overwritten just fine.
In React, I have created my own global styles and imported it at the top of my index.js using import './global-styles.scss';. This makes the global styles reach all components just fine. My problem is I can't overwrite the global styles in my local "component" styles. I know I can use "hacks" like !important but that is not the type of solution I am looking for.
How can I change things to have my local "component" styles overwrite my "global" styles?
If you come form an Angular background then you will understand exactly what I mean, for React people, I hope my question makes sense :)
Related
I've started using emotion's inline styles with object literals passed into the CSS properties. Everything works well, until one of my styles conflicts with a global style on the external stylesheet.
The .css-17smytq is my inline style. .elementor-kit-7 is applied by an external stylesheet
Is there anyway to work around this behavior without adding !important everywhere?
I will be embedding the react app in a number of sites where I don't control the stylesheets. I can't anticipate the styles that will be defined on the sites my app is on.
in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately
Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.
The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.
At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.
If you need to scope styles to components, you need to use something like styled components.
Take a look at this post that might help you understand it better.
https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/
We've two options to keep styles in an Angular 9 app; global styles in styles.css or individual component level styles in the component css file.
If looked at the project from performance perspective;
what should be the preferred way?
Should we keep all styles in a single global style.css file or keep each component related styles in their component.css file?
To answer this question we have to refer to the Angular official doc.
By using Using component styles you will have a better modular design.
Angular can bundle component styles with components, enabling a more
modular design than regular stylesheets.
But, if there are some styles that are common between more than one component it's better to have a shared css and e.g. if you use pre-processor such as .SCSS, LESS, SASS, ..., you can have some _var.scss to define general styles such as base color, fonts, ... and then #import in other component styles or just register global style files in the styles section which, by default, is pre-configured with the global styles.css file.
So, using component styles provide scoping restriction and View encapsulation for your app. This scoping restriction is a styling modularity feature:
You can use the CSS class names and selectors that make the most sense
in the context of each component.
Class names and selectors are local to the component and don't collide with classes and selectors used elsewhere in the application.
Changes to styles elsewhere in the
application don't affect the component's styles.
You can co-locate the
CSS code of each component with the Typescript and HTML code of the
component, which leads to a neat and tidy project structure.
You can
change or remove component CSS code without searching through the
whole application to find where else the code is used.
There are several ways to add Global (Application wide styles) styles to the Angular application. The styles can be added inline, imported in index.html or added via angular-cli.json. The angular allow us to add the component specific styles in individual components, which will override the global styles.
I don't think there is much (if any at all) significant difference in performance. The global or component style distinction is all about the scope of those styles and maintainability of your codebase. Generally its good idea to keep everything in components as they are scoped to themselves and will not accidentally override other same styles from anywhere else. And global styles should stay mostly to theming, utility, helpers etc.
Besides you have an option to make component style global as well, if for some reason you need to do that.
step to define/preferable way for global style
Create _base.scss file in the css folder (first create css folder).
import other helping scss file in _base.scss file
add the entry of _base scss file in style.scss file (style.scss available when we create the folder).
In my app.component.html I have the following, working class assignment.
<body>
<span class="test">SHABOO</span>
<div class="container">
<router-outlet></router-outlet>
</div>
</body>
In the outlet, a component is rendered and it contains the following.
<span class="test">HAZAA</span>
I expected it to get the same style as the first one but it seems that the style doesn't cascade down to the component. It made me uncertain if I'm mistaken about how the styles are supposed to behave between parent and child components in Angular.
I made sure that the name of the class isn't overriden (to exclude the risk of collision). At the moment, I'm putting similar chunks of SCSS code in each component and that's obviously bad practice.
If I #import "../app.component.scss", the styles kicks in. But I was under the impression that even without the import, the style is supposed to cascade.
Angular components use view encapsulation. This is by design so that components are reusable across applications. To treat a component's styles as global, set the view encapsulation mode to none (not recommended).
Instead of using none, register global style files in the Angular CLI styles section, which is pre-configured with the styles.css file.
Component CSS styles are encapsulated into the component's view and don't affect the rest of the application.
To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes:
ShadowDom view encapsulation uses the browser's native shadow DOM implementation (see Shadow DOM on the MDN site) to attach a shadow DOM to the component's host element, and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.
Native view encapsulation uses a now deprecated version of the browser's native shadow DOM implementation - learn about the changes.
Emulated view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. For details, see Appendix 1.
None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.
To set the components encapsulation mode, use the encapsulation property in the component metadata:
src/app/quest-summary.component.ts
// warning: few browsers support shadow DOM encapsulation at this time
encapsulation: ViewEncapsulation.Native
ShadowDom view encapsulation only works on browsers that have native support for shadow DOM (see Shadow DOM v1 on the Can I use site). The support is still limited, which is why Emulated view encapsulation is the default mode and recommended in most cases.
External and global style files
When building with the CLI, you must configure the angular.json to include all external assets, including external style files.
Register global style files in the styles section which, by default, is pre-configured with the global styles.css file.
See the CLI wiki to learn more.
This is how angular works. Every component is separated with it's CSS, even if it is child component of a parent. They can't inherit their parent CSS.
Haza span component is child of your app component, but it is separated component. So, you can't get those Shaboo styling to Haza.
Solution:
if you want to maintain same CSS, there are multiple ways.
Recommended way:
a) if it is only for onle class, copy the class to the child component.
b) if it is for huge number of classes, create a css file for them and import them in both parent and child component css.
Example:
#import '../span.css';
you can add this css to styles.css. then you will get it anywhere in the app. if you want this style many places, you can do it.
As #Christopher Peisert mentioned, by using
encapsulation: ViewEncapsulation.Native
end of the #component decorator in child.component.ts. It is not recommended way
The global CSS files are those that are listed in angular.json. All others CSS files are encapsulated by default (this can be removed but is not recommended.)
Keeping your global CSS organised is important as your application grows. What I like to do is create a global styles folder and then add new files for different widgets that I might be altering. Since removal of ::ng-deep these types of changes have to be done in the global scope.
It works like that. If you are in need of having a common style then add it in the global styles.scss file.
If you want a global style put it in the global file styles.css or styles.[Your css preprocessor]
See this example https://stackblitz.com/edit/angular-a5ntm6?file=src%2Fstyles.css
I put test class at the end
.test{
color:red;
}
In the "latest" Angular 6:
For some reason the styles I define in the component.css file do not apply.
I believe this was working before in earlier versions of angular, and there must be a reason for having that file there in the first place?
I have Googled it and I found that you can set encapsulation: ViewEncapsulation.Native in the component declaration, but then the global CSS is ignored.
Anyone who can explain why? Eventually how to do this correctly?
For Explaining why your solution of setting encapsulation: ViewEncapsulation.Native doesn't work
The reason is you told angular to make a shadow root of your component and apply only the css that is local to it. That means the style specified inside the component with style or styleUrl will only apply to it.
And for how to do it correctly is...
If your wish is to make a component work with both the styles which provided globally as well as styles provided locally is to
1. Place all your styling rules to the style.css located at the root of your project directory. This will apply to all the component globally
2. While dealing with the CSS file of the component itself make sure you prepend ./ like this styleUrl: ./component.css
I would encourage you to go through these resources to have a better knowledge
https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
https://angular.io/guide/component-styles