I'm in a situation where I need to use both and tags in this project because in some situations the code breaks if I choose mat-select. But visually the select tag looks plain old ugly.
I tried looking for the CSS in Material Component documentation but wasn't able to find it. Do you guys have any suggestion or actually know where I may find this CSS?
Where to find mat-select classes?
To find them you can use the browser inspector or seeing the master css file:
https://github.com/angular/components/blob/master/src/material/select/select.scss
Globally
If you need to update it globally you can override one or more of those classes according to your need in your style.css.
::ng-deep
You can use ::ng-deep (like ::ng-deep .mat-select-content) to force the override the mat-select style in your component.
::ng-deep .mat-select-panel .mat-option {
padding: 10px;
}
ViewEncapsulation
You can the ViewEncapsulation to None if you want to avoid to inherit the mat-select style imposed by Angular Material in your component.
Component Template
import {ViewEncapsulation } from '#angular/core';
....
#Component({
....
encapsulation: ViewEncapsulation.None
})
Component Style
.mat-select-panel .mat-option {
padding: 10px;
}
Related
The height doesn't get bigger and the inscription gets smeared and not pretty
I have already tried many types of solutions but none of them worked I tried to do
::ng deep .mat-option{...}
But it didn't work
I tried to do
::ng-deep cdk-global-overlay-wrapper{
But that didn't work either
And I want to increase the height of
mat-option and it doesn't work
Assign a panel class for the mat-select, so that a custom class is available inside the overlay,
<mat-select panelClass="custom-select">
<mat-option>option1</mat-option>
<mat-option>option2</mat-option>
</mat-select>
then in the main styles file styles.css add css rules in the custom class to override the default styles
.mat-select-panel.custom-select .mat-option{
height: 50px;
}
I have declared some css styling in global style.css file which is src/style.css in my angular project. In one of my component I want to alter some styling and scope it only for that component. Currently, I can able to do that by using ::ng-deep, but, problem is, while I am changing global style from my child component using ::ng-deep it also alter the styling in global.scss as a result rest of my component also affecting for this. So what I want is, when I am changing this global style from that child component I just want to scope that change under that component.
The CSS I declare in Src/Style.css is:
.main-content {
width: 100%;
padding: 24px;
}
and in my component I use following style in component css file :
::ng-deep .main-content {
padding: 24px 0;
}
At this moment, how can I alter the global styling from child component and scope that change only for that component.
You can try using the !important property on your component's css file, that will overrite the global one.
I am fairly new to Angular and HTML.
I have two different components, let's say componentAand componentB, both with their repsective .html, .css and .ts files.
In componentA.css, I define some styles, e.g.:
.compA-style {
font-size: 20px;
}
Now in componentB.hmtl, I am using componentA's directive:
<compA></compA>
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
Note: I cannot change the style of componentA because I want to use the unmodifed style inside other components, I only want to change for the componentB.
Note: I already tried !important inside componentB.css, i.e. I tried this one:
.compA-style {
font-size: 30px !important;
}
And then in componentB.html:
<compA class=".compA-style"></compA>
But that didn't work.
Angular encapsulates CSS at component level.
This means that even if you have multiple CSS classes with the same name across multiple components, each of those components will use its own class, regardless of the DOM structure.
There are times when you might want to modify a child component styling, though.
You can do this in multiple ways. Let's assume compB contains compA.
::ng-deep
:host {
// ... Other styles
::ng-deep compA {
// ... Custom compA styles
}
}
Explanation: ::ng-deep selector provides cross-component visibility of CSS given its boundaries (wrapper selectors). Whatever you write within ::ng-deep compA will be shared with everything in compA.
WARNING: If you use ::ng-deep at base level in a component styling sheet (without a wrapper), the styles it contains will be spread both up and down across the application (NOT only within current component) and they load whenever the component loads. That is why it's usually wrapped into a :host selector.
Global style sheets
You can write custom styles in application base level styles.css file or create new css files to include at application load (outside Angular environment, for example with a <link> tag in index.html).
They are useful when you have a bunch of styles to overwrite that are the same across the application and don't want to mess with specific component stylesheets too much. Might not always be a good practice.
Add new component stylesheets in styleUrls array in the #Component decorator.
This might not necessarily apply to your case, but it's worth mentioning.
#Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
})
This is a good approach that helps keeping common styles in a single place while not making them global. You can add whatever styles you need to the specific component and split them as needed.
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
There is only way to add styles without edit component-A directly.
on componentB.css
:host ::ng-deep compA-style {
font-size: 30px !important;
}
on componentA.html
<compA class="compA-style"></compA>
NOTE: This functionality is deprecated.
Checkout docs ng-deep.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
I'm trying to override material UI checkbox css in my Home Component and it is working fine. But there are side effects like css of checkbox in form component is overriding. Can anyone suggest a solution for this.
HTML used
<mat-checkbox formControlName="home">
Home
</mat-checkbox>
css used for over riding by default it is grey color
::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}
Form component mat checkbox - for this component also it is overriding border color to blue without writing any css
<mat-checkbox formControlName="form">
Form
</mat-checkbox>
I believe this is happening due to usage of ::ng-deep
I even tried ViewEncapsulation also in the Home component. It is still overriding css in Form component and other css in both the components.
Any help regarding this would be appreciated.
To apply the style only inside a specific child component, add the :host selector to the following code in the CSS of that component:
:host ::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}
This will scope this rule to all checkboxes which are in this current component and all its children and will work pretty well in case of routed components.
But if you want to stick this css rule only for home page template then you can use:
home.component.css
.mat-checkbox ::ng-deep .mat-checkbox-frame {
border-color: blue !important;
}
Angular will replace it with:
.mat-checkbox[_ngcontent-rvb-c0] .mat-checkbox-frame {
border-color: blue !important;
}
where _ngcontent-rvb-c0 is unique identifier of current compoent
With my app, I currently have only 1 component (the nav) and I have set the CSS for app-root, as well as app-navbar as:
* {
margin: 0;
}
Despite this, the margins persist; I can't even edit them in chrome web development tools in the browser for some reason, The only way I get the margins to disappear is to go the angular root index.html file, and manually enter the style tags there,
Anything else I apply to the * tag (such as font-family) is applied to the entire document, just not margin for some reason,
If anyone knows why you'd save me from ripping any more hair out.
You can add it in app.coponent.css
* {
margin: 0;
}
and set encapsulation: ViewEncapsulation.None in component decorator.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None
})
By setting ViewEncapsulation to None all the styles apply to the entire document. Or in other words, a component could overwrite styles from another component because its styles are applied to the document head later. Otherwise you can use the global style.css file generated in your directory.
When you create a project with the Angular CLI, the CLI creates a global style file, usually under the name style.ext, where ext is the extension you chose (default to css).
So you should open this default file, let's assume it being style.css, and add those lines in it.
* {
margin: 0;
}
If I were you, I would also add this to this file :
html,
body {
height: 100%;
}
This will prevent you from some errors you could encounter later on, if you want to play with heights (I do this in all of my projects)