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;
}
Related
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
}
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 🔥
Could you please tell me why css is not applied on p tag ? I have nested components .Now I want to add css in inner component element .but color property not applied why ??
Here is my code
.a p {
color: blue;
}
.a .test{
color: blue;
}
https://stackblitz.com/edit/angular-f99kxh?file=src%2Fapp%2Fhello.css
You can use ::ng-deep to get hold of inner elements.
.a ::ng-deep p {
color: green !important;
}
updated stackblitz
This happens because of angulars css encapsulation, which binds css to the scope of the component it is attached to, rather than allowing its default cascading behaviour.
You can either just create a global css file, which is not component-specific and import it in your index.html or disable it in general.
Components CSS will get applied to HTML view. Hence, you should write css in components css file.
abc.ts
#Component({
selector: 'abc',
template: `<p class="test">abc</p>`,
styleUrls: ['./abc.css']
})
in abc.css add your css.
I hope it will help you!
I am attempting to apply some css changes to mat-tooltip from angular material 2 and found in the documentation a matTooltipClass that can then be selected in the css file to make changes. However, I am not able to get it working.
component.html :
<mat-cell
*matCellDef="let productInfo"
matTooltip="{{productInfo.description}}"
matTooltipClass="tooltip">
{{ productInfo.description}}
</mat-cell>
component.scss:
.tooltip {
background-color: red;
color: blue;
font-size: 20px;
}
You have to use ::ng-deep to override default CSS for material elements:
::ng-deep .tooltip {
background-color: red;
color: blue;
font-size: 20px;
}
In addition to what was stated above,
Here are two methods that worked for me:
-in the Component.scss:
::ng-deep mat-tooltip-component{
& .mat-tooltip{
color: green; // your custom properties here.
}
}
-Globally:
.mat-tooltip{ // making the font size on the mat-tooltip 1.5rem globally
font-size: 1.5rem;
&.exaggerated-tooltip{ // to modify the tooltip create a class like this
font-size: 2.5rem; // and use it like this: *matTooltipClass="exaggerated-tooltip"* in the
color: red; // component in which you are putting the tooltip
}
}
A blog post by Siderite (Styling Angular Material tooltips) provided an answer that worked for me. I am paraphrasing from the most-relevant portion of his post and I am using the matTooltipClass="tooltip" scenario described in the Question above:
[The .tooltip class definition] should either be in the global CSS
file (so it applies to everything) or your component should declare
encapsulation ViewEncapsulation.None. [If the .tooltip class
definition is in the global CSS file], then ensure the declaration of
the class is specific enough: try this:
mat-tooltip-component .mat-tooltip.tooltip {...}.
In my case, I had defined the .tooltip class in the global styles.scss file, and it wasn't working until I followed Siderite's suggestion and defined it like this:
mat-tooltip-component .mat-tooltip.tooltip {
color: blue !important;
}
This approach is avoids using ::ng-deep as suggested in the accepted Answer. Angular documentation states that approach is deprecated. I did find I needed to use !important, which some believe is bad style.
Angular material doc says matTooltipClass supports the same syntax as ngClass.
thus you might try [matTooltipclass]="'tooltip'"
<mat-cell
*matCellDef="let productInfo"
matTooltip="{{productInfo.description}}"
[matTooltipclass]="'tooltip'">
{{ productInfo.description}}
</mat-cell>
From the example provided in the website (https://material.angular.io/components/tooltip/examples):
import {Component, ViewEncapsulation} from '#angular/core';
/**
* #title Tooltip that can have a custom class applied.
*/
#Component({
selector: 'tooltip-custom-class-example',
templateUrl: 'tooltip-custom-class-example.html',
styleUrls: ['tooltip-custom-class-example.css'],
// Need to remove view encapsulation so that the custom tooltip style defined in
// `tooltip-custom-class-example.css` will not be scoped to this component's view.
encapsulation: ViewEncapsulation.None,
})
export class TooltipCustomClassExample {}
If you stick that encapsulation: ViewEncapsulation.None line there for your component where you want to use your custom tooltip class, it ought to work. It's how I fixed the issue on my end.
Seeing that ::ng-deep is depricated now, best seems to be to add encapsulation: ViewEncapsulation.None, in your component decorator under your styleUrls line
Just be careful that all your css classes will be global then, so make sure your classes in that component have unique names if you do not want to overwrite the classes in other components accidentally
I found out there is a div element down the body with class="cdk-overlay-container". I considered its z-index. it was 1000 below the z-index of my modal. I made it the same as my modal's z-index, i.e. 1050. And it is working. I also had to put ::ng-deep before my class in CSS file.
::ng-deep .cdk-overlay-container {
z-index: 1050;
}
In case your project prohibits to use: ::ng-deep, you can use
encapsulation: ViewEncapsulation.None
in the TS file.
I have the following code in an Angular project
<input class="form-control" type="number" [(ngModel)]="cons.failPercent" [ngModelOptions]="{standalone: true}"
mdTooltip="Typically valves can be repaired three times before they need to be replaced"
mdTooltipPosition="right"
autofocus/>
In my component I have
#Component({
templateUrl: './ownership-form.component.html',
styleUrls: ['./ownership-form.component.css'],
encapsulation: ViewEncapsulation.None
})
and in my CSS I have
.md-tooltip{
color:yellow !important;
height:auto;
}
But it does not appear to be styling the tooltip. How can I fix this?
Depending on your Angular version you'll need to use the /deep/ or ::ng-deep combination selectors to circumvent encapsulation. Alternatively, set the styling on your global stylesheet (commonly styles.scss).
Angular 2:
/deep/ .md-tooltip { ... }
Angular 4.3+:
::ng-deep .md-tooltip { ... }
More info at Hackernoon
I would personally scope your styles to the component in question.
Angular < v4.2
:host /deep/ {
.md-tooltip { ... }
}
:host >>> {
.md-tooltip { ... }
}
Angular >= v4.2
:host ::ng-deep {
.md-tooltip { ... }
}
If you remove your encapsulation from the component. The styles should still work. By adding ::ng-deep inside the :host(..) it will emulate global css. But only in a downward piercing direction.
Angular is trying to promote component level styles. I would avoid moving code to the global stylesheets. If you visit a route which does not require the component in question then you are instantiating (loading code) for no reason.