The Angular Material CDK has a builtin breakpoints constant.
Does Angular Material also have a SASS Map or variables that we can import that match the breakpoints provided in the CDK?
Something similar to what is defined in this question.
Related
I am relatively new to using angular material and it has taken a bit more work to use than I have faced using some other css frameworks like PrimeNG, Fomantic/Semantic UI. Most recently I have used PrimeNG which optionally comes with its own suite of utility classes in the form of the primeflex package. It does not appear that material has this (due to them leaving it up to you to decide i suppose) and I am therefore opting to use primeflex WITH angular material components. Is there an existing suite of material css classes that i can use instead, like simple classes that just give flex styles, height: 100%, etc.
My other problem is that I would like to tap into material in order to give my components background/font color styling relative to the current theme but I have not been able to find a 'helper class' that applies the current primary/accent/warn color to an element given the current theme. Any references to documentation are highly appreciated.
I assumed it would look something similar to:
// my-theme.css
#use '#angular/material' as mat;
.my-primary-text-class {
color: mat.$primary-text-color
}
or something similar?
As title says, I want to know which css class can be paierd with angular material.
The purpose is to have simple classes just as column-md, row, paddings, margins, containers, avoiding confussion with the angular material classes.
I want to have just one css library to style things like colors and position and have my componens running well.
I thought that bootstrap could be a good pick, but I'm facing errors with the card styling because it conflicts with angular material cards.
I'm new to Angular, and when I was using Vue, we had a beautyful framework called Quasar (https://quasar.dev/) that brings components alongside with css classes, I want to have something similar in Angular but using Angular Material.
Is there any performance difference if you declare styles in separate jss / css file or pass them as a style props to a Component, for example, using Chakra UI?
In my React Application,i'm using React-Bootstrap and i've imported
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
In order to style some other components, i imported MDBreact library, when i did so,the components (that were styled using bootstrap.min.css) have been effected by the exist of MDB library.
Any suggestion to resolve this issue would be appreciated
Theorically, just import what you need where you need it ? You usually import bootstrap in your main component, but if you want it only in a child, nothing prevent you from importing it here.
I'm using angular2 material in my application. I wish to style my app in material theme. Places where i'm using material components directly(like md-button, md-card), everything is fine. But I'm not sure how to style regular divs using the same theme. I don't want to import any other materialize css. So far, I could find only one class(mat-elevation-z*) which i can use to elevate divs. But i'm not able what all classes are available for me to use.
Here is a link to the different components that can be used: material 2 component docs and this is a link to the Github: github/material2
Hope this helps!