Angular Material and materialize css together - css

I was using angular material but it does not have the full angular material css classes . So I tried adding materialize css to index.html but now I am getting 2 css styles one from angular materialize theme and other from the materialize css which I added to index.html
Is there any way by which I can add add materialize css without breaking a angular-material theme

Related

How to force material-ui to generate !important css styles to prevent WordPress/Gutenberg css style clashes?

I like to write an WordPress plugin extending the Gutenberg Editor. The plugin uses material-ui to render it's ui.
Unfortunately the material-ui generated css style selectors have a lower priority than some of the Gutenberg css styles. This has the result of mixed css application of both Gutenberg and material-ui css which looks really ugly :-)
How can I configure material-ui to generate styles having a higher priority than Gutenberg css styles ?
One solution could be suffixing every generated css value with "!important". Better option would be to prefix every material-ui generated css rule with an more specific css selector than the Gutenberg styles.
How can I do that using material-ui ?

load angular components style latest

how can I control the order of loading components css?
I know that in angular.json file the file that will be latest will override the others. there I import my primeng css
but the components css are generatered by angular.
how can I make it override the primeng css?
currently I have to add !important for all my style
Thanks in advance

Adding Bootstrap Css in reactJs

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

How to Style Divs which are not material components angular2 material

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!

Is it possible to include bootstrap css as well as semantic-ui css on the same page?

I am developing a SPA with rails as the back-end, angularjs for front-end, and using semantic-ui components for my user interface. But I want to use the modal provided by the angular-ui bootstrap http://angular-ui.github.io/bootstrap/#/modal which has a dependency for bootstrap's CSS.
Now when i include the bootstrap CSS from the CDN, it is overwriting my existing semantic-ui styles by making the component size smaller, changed font styles etc.
So is there any way to make both of these CSS co-exist happily?

Resources