I'm working on a webpage that's based on Angular and uses Bootstrap. When I add an Angular module, a .scss file is created. However, even with my .ts file specifying my .scss as styleUrl, the page still uses the bootstrap reboot styles.
Specifically I'm trying to simply change the page's background colour right now but it seems not to be possible. All it changes is the area also defined by this weird jumbotron box.
Do I maybe have to specify in my html code that I want to use the style sheet? I thought I already did this by linking the stylesheet in my .ts.
Here's my code for the component.ts and component.scss, as well as a screenshot from the inspector in chrome:
.ts
import {Component, OnInit} from '#angular/core';
import {AuthService} from '../../services/auth.service';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
.scss
.jumbotron {
background: none
}
body {
background-color: #7EF911
}
How do I define my css as more important than bootstrap's default stuff?
Thank you very much!
To override Bootstrap style try using ng-deep
:host ::ng-deep .jumbotron {
background: none
}
:host ::ng-deep body {
background-color: #7EF911
}
Related
I hope someone can give me a hint, how to investigate this issue.
In a Vue project, buefy is included from main.js like this:
import Vue from 'vue'
import Buefy from 'buefy'
import './style.scss'
Vue.use(Buefy)
import Client from './client.vue'
let vm = new Vue({
el: '#app',
render: h => h(Client)
})
, where style.css imports buefy/bulma styles:
#import "~bulma/sass/utilities/_all";
[...]
#import "~bulma";
#import "~buefy/src/scss/buefy";
Buefy/Bulma css should be overriden by styles defined in single file vue components like:
<style lang="scss">
.logLine{
margin: 0px;
padding: 1em;
}
</style>
The strange observation is, that while padding overrides bulma styles (as expected), margin is overridden by bulma styles:
screenshot from firefox css inspector
It shows, that while styles from bulma/sass/base/minireset.sass get overridden by .logLine style definitions from the single file component. But .logLine style definitions get overridden by bulma/sass/elements/content.sass.
I expect the styles from .logLine to override all Buefy/Bulma styles.
As often happens, when formulating the question, details catch your attention that guide you to the answer:
The style from bulma that was overriding my styles from the single file component was using the css pseudo class :last-child
.content p:not(:last-child), [...] {
margin-bottom: 1em;
}
I think this :last-child makes firefox grant this style rule precedence.
I "solved" the problem by adding .content .logLine:not(:last-child) to the selectors in the single file component.
.content .logLine:not(:last-child),
.logLine, {
margin: 0px;
}
Now it does not get overridden anymore.
I need to access the generated css classname from within an angular component, in order to style a 3rd-party component.
Angular does some magic transformations on the local css classnames to enable scoping. I need to apply some custom styles to an ngx-datatable component. To do this, I need to pass it custom classnames. Because of what angular does to the classnames, these no longer match.
Adding the classnames to the global scope or using ::ng-deep both work, however I would rather not break the encapsulation.
dashboard-component.ts
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
getRowClass(row){
return 'my-class';
}
}
dashboard-component.scss
.my-class {
background: green;
}
dashboard-component.html
<ngx-datatable
[rowclass]="getRowClass"
></ngx-datatable>
The way I see it I should be able to access some reference to the css class from within the component, say this._styles, which will then carry the generated name of the class at runtime, so I can do
getRowClass(row){
return this._styles['my-class'];
}
I think you are not able to propagate your styles to ngx-datatable.
You can use encapsulation: ViewEncapsulation.None within your #component but make sure you use it carefully as it will lead to some weird css behaviours.
Next, What you can do is create a container for your dashboard.html file like:
<div class="dashboard-container">
<ngx-datatable></ngx-datatable>
</div>
and inside your dashboard.scss you can reference the parent container
.dashboard-container {
.my-style{}
}
Just put the css classes in the global style file ,otherwise you will need to use ::ng-deep,so my advice to put ngx-datatable in the global style file
check the ngx-datatable demo asset/app.css where the did the same
another option you can set the encapsulation: ViewEncapsulation.None on the component the the class name will be the same
#Component({
selector: "app-demo",
templateUrl: "./demo.component.html",
styleUrls: ["./demo.component.scss"],
encapsulation:ViewEncapsulation.None
})
export class DemoComponent implements OnInit {
demo.component.scss
ngx-datatable {
.green-color {
background:green;
& div {
color :#fff;
}
}
}
set the encapsulation to none or put the style in global style file are the same here because both ways will be the style globally without any change
demo 🔥
I have the following style:
.ag-theme-fresh .ag-row-selected {
background-color: #bde2e5;
}`
It comes from a css style file of a theme. But I want to overwrite it with this style:
.ag-theme-fresh .ag-row-even .ag-row-selected {
background-color: #1428df;
}
But it has not effect and my component uses the first style. How can I overwrite the first style 1? I tried with !important but it does nothing.
Should I define my custom style at the beginning of the css file?
UPDATE:
I found I can use the function gridOptions.getRowClass to set the style class to be used. But I would like to solve the issue central (for all the angular grids that I use in my application). Any idea?
You should use ViewEncapsulation
Just add to your component encapsulation: ViewEncapsulation.None:
import { Component, ViewEncapsulation } from "#angular/core";
#Component({
selector: '....',
templateUrl: '....',
styles: [`
.ag-theme-fresh .ag-row-selected {
background-color: #1428df !important;
}
`],
encapsulation: ViewEncapsulation.None
})
To override the ag-grid use you need to use ng-deep as the style defined in angular component do not overide ag-grid css
:host ::ng-deep .ag-header-cell-label {
justify-content: center;
}
update : this will make the style global. By changing the encapsulation set as none (ViewEncapsulation.None) at component will make style global as well.
if you are using sass or scss you could override in the style.scss/sass. this would be applicable at all places
#import "../node_modules/ag-grid-enterprise/dist/styles/ag-grid.scss";
#import "../node_modules/ag-grid-enterprise/dist/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
.ag-theme-alpine {
#include ag-theme-alpine(
(
// use theme parameters where possible
alpine-active-color: #c066b2,
)
);
.ag-header-cell-label {
justify-content: center;
}
}
if you have need of doing at a specific grid, prefer custom class and make sub-class for the ag-grid.
You can also apply the styles globally and if you do so it will override the styles for all your ag-Grid components. This might not be an option if you are trying to style the components individually, but it's a good way to give a global base style override.
Also, you should try to use more specific selectors instead of using important.
Here is an example:
.ag-theme-alpine > .ag-row.ag-row-selected {
background : red;
}
In my angular app I would like to set a background image for a specific view.
To this end, I added the following to the css-file of a component:
body {
background-image: url("../../../assets/images/backgroundImage.jpg");
}
However, the background doesn't change.
This the the file path of the file containing the css-code shown above:
angular-app/src/app/users/profile/profile.component.css
... and this is the file path of the background-image:
angular-app/src/assets/images/backgroundImage.jpg
I also tried
body {
background-image: url("assets/images/backgroundImage.jpg");
}
... but this resulted in a warning during compilation and didn't work either.
What am I doing wrong?
I gave the root element class "root" and then put the following into the css-file:
.root {
background-image: url("../../../assets/images/backgroundImage.jpg");
}
... now the background changes but not for the whole vertical length of the screen (the lower part remains white):
According to Angular, The styles specified in #Component metadata apply only within the template of that component.
you can use a hack like this
In your styless.css file add this
.selector {
background-image: url("../../../assets/images/backgroundImage.jpg");
}
now in your component you can do this
ngOnInit() {
document.body.className = "selector";
}
ngOnDestroy(){
document.body.className="";
}
But this is highly not recommended, i dont know what your code looks like, but there must be another way.
Scale your component to fit whole view-port
set the background on your component
I will work on a plunker and link to this file as an edit when done
I will add another answer for this because its totaly different from my previous answer
in your component import ViewEncapsulation from angular/core
import { ..., ViewEncapsulation } from '#angular/core';
In your #component metatag add encapsulation: ViewEncapsulation.None,
#Component({
...
encapsulation: ViewEncapsulation.None,
...
})
This has a side effect though, all styles in your component will be available to all other components once it loads.
You can check more about it on the Angular page
You probably need to either create a service or use ngrx to communicate between the child component and app.component to switch the style of the app.component.html using ngClass.
In .angular-cli.json, I got some global styles:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
"styles.scss"
],
But I don't want any of them being applied to a specific component - is it achievable?
EDIT 1:
Unfortunately, overriding the CSS style in the component style won't work because the HTML in the template of the component is fetched from a Web API backend - I guess I can't realistically override every possible class/selector?
CSS cascades (hence the term, Cascading Style Sheets).
for full browser support your only option is to override selectors.
another option, not as common due to lack of support on IE and Edge,
is the all property.
html
<div class="component-container">
<!-- your components html template ... -->
</div>
css
.component-container {
all: initial;
all: unset;
}
Using component styles
For every Angular component you write, you may define not only an HTML template, but also the CSS styles that go with that template, specifying any selectors, rules, and media queries that you need.
One way to do this is to set the styles property in the component metadata. The styles property takes an array of strings that contain CSS code. Usually you give it one string, as in the following example:
#Component({
selector: 'app-root',
template: `
<h1>Test Text</h1>
`,
styles: ['h1 { font-weight: normal; }']
})
export class AppComponent {
/* . . . */
}
styleUrls
One or more URLs for files containing CSS stylesheets to use in this component.
styleUrls: string[]
styles
One or more inline CSS stylesheets to use in this component.
styles: string[]
You can use the :not selector in your global CSS.
You'd have to play around with it to get the desired behaviour but it should be something like this:
h1:not(.my-specific-class) {
font-size: 3rem;
}
You can use angular built in shadowDom API from view encapsulation. Which will make your component elements loaded inside a separate DOM tree so global css wont affect your component elements.
#Component({
selector: 'app-root',
template: `
<h1 class="head-app">Test Heading</h1>
`,
styles: ['./app.component.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
/* . . .
You can define styles at component level using styleUrls property inside the scope of #Component. Please have a look at below code:-
#Component({
selector: 'app-manageUser',
templateUrl: './manageUser.component.html',
styleUrls: ['./manageUser.component.css'],
providers: [UserService]
})