Angular cli automatically loads css files those are in node_module directory. I am using #swimlane/ngx-dnd and it has css style. But I want to use bootstrap styles for my components. What's standard way for doing this ?
Appreciate any idea and helps.
In your app.component.ts, add:
#Componenent({
encapsulation:ViewEncapsulation.None,
styleUrls:[''], // Add your bootstrap css files
templateUrl: ....
})
If you want to override a package's styles, you can just provide overrides in your own stylesheet or component stylesheet with the same or more specific style definition. Your definition will need to match their style, but must be loaded after their style and/or be more specific so that your style applies correctly.
If you want to exclude their style sheets you will need to use some sort of plugin for webpack to Ignore the css files in the package directory.
I'd recommend the first approach.
If the package you are using creates dynamic markup along with the styling, you may need to change your component encapsulation so that the component you are using can successfully apply your styles to the generated dom elements.
Related
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/
I want to apply one CSS file to only on Home.js component. I don't want this CSS to be applied to other components. For other components, I have a CSS file. But when I apply that CSS file to Home.js, it also applies to other components, and it mixes everything.
Once a css file is loaded it is accessible in all files. If you need to avoid the style being conflicted, it would be better to create a unique id/class name or use inline styling
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).
I have a package/library (cs-clock) written in Angular to generate a UI Widget. This was published to a local repository. This library has some default styles within the library codebase.
Now I have another application where this library is used as an NPM Package via package.json. When the parent is trying to render the widget - The default styles are rendered from the library.
Now, I want to specify styles from parent to this library which means whenever a new theme CSS file is included in the parent, the child library should be able to render those styles.
I tried with the following options:
Using encapsulation property of Angular- By setting it to None and exposing classes
Using ::ng-deep, :host /deep/, :host >>>
Putting a CSS file in index.html of the parent with !important to the classes specified in it.
Unfortunately, These approaches does not seem to be the ideal one. Is there any other way through which my use-case can be achieved in a better way.
Any help is much appreciated.
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