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!
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.
I am trying to use Bootstrap in React. Bootstrap button and grid are working but CSS for bootstrap is not showing up. Are there any steps to add bootstrap CSS separately?
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that u get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. Hovewr if you are only interested in css, then its perfect.
Using this u can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If u want simple setup , then u can use reactstrap link
Other frameworks include react-bootstrap link
Is there any way to completely override all material-ui styles and have components adhere to your own completely custom style guide? In essence, wiping all material-ui styles and starting from their html skeletons? Creating a new theme with mui or themeProvider for material-ui components isn't robust enough.
I've looked # material-ui source code and they have a styles.root variable. Is there was a way to access that object and make it more robust? I'm open to any ideas and recommendations.
So far what hasn't worked is:
themeManager
muiTheme
inline styles ( you can't access the child elements of the components )
class styles ( you have to use !important with a lot of the css attributes and we're trying to avoid that )
In essence, wiping all material-ui styles and starting from their html skeletons
Material UI doesn't use seperate CSS. All CSS is driven by JS so your only option is what is offered by ThemeManager.
I want to use the Bootstrap theme with paper elements in a Polymer project.
Can I still use the paper elements but turn off their (Material Design) styling globally?
I don't think it's paper-friendly to do that: you should see paper as a bootstrap-like implementation of material design in polymer.
Why don't you simply use custom native elements with polymer and style them as you wish (bootstraporwhatever) ?