I have an angular app that is using material icons. I created a component that uses primeng's org chart but the icons on the org chart are not using primeicons instead are using materials icons. It looks like the tag is being modified which is messing up the styling of the org chart. I would like this component to not inherit the material styling. I tried setting ViewEncapsulation to None and then removing the ViewEncapsulation settings but nothing changes. I also tried adding this to the css file:
i {
font-family: 'primeicons'
{
or this:
i {
all: unset
}
Nothing seems to be working.
Related
I am embedding a ReactJS application using Material UI styled components inside a Wordpress page. I am using webpack for transpilation of the js.
I have produced the bundle of the embedded version of the application and I am importing and instantiating it in the following way
<script src="https://<domain url>/path/myapp.app.bundle.js"></script>
<script type="text/javascript">
function loadApp() {
window.MyApp("my-app-div");
}
</script>
my-add-div corresponds to the id of the div where I want my application appears
Everything is working under the functional point of view.
My problem is related to the look and feel of the application that is influenced by the css of the wordpress theme.
I have tried to use the components CssBaseline and ScopedCssBaseline but the rendering seems to ignore them.
I have also tried those directives to reset the css styles but it did not work
#my-app-div {
all: initial; /* blocking inheritance for all properties */
}
#my-app-div * {
all: unset; /* allowing inheritance within #my-app-div */
}
I have found a possibile solution prefixing all the css of the Material UI style component with the id of the my-app-div div, in this way the css of the styled component has more priority than the css coming from the wordpress theme.
I have also found a plugin that could help in this but it is not compatible with the latest version of stylis https://www.npmjs.com/package/stylis-plugin-extra-scope
Does anyone has any suggestion to help me?
Have you tried adding a prefix to your material UI class for production build
using the following approach.
import { createGenerateClassName, StylesProvider } from '#material-ui/core'
const generateClassName = createGenerateClassName({
seed: 'xyz',
productionPrefix: 'abc-',
})
function App() {
return (
<StylesProvider generateClassName={generateClassName}>
...
</StylesProvider>
)
}
I need to change background color for this css code
.mat-toolbar.mat-primary {
background
: #d12626;
color: #fff;
}
.mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
I need to change the background for the above code. How to do that
I tried
[ngStyle]=' .mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
'
But not working Then i got another suggestion from stackoverflow
[style.font-size]="fontSize+'px'" this code is working for 'font-size' but not woking for my need code this is my need [style.mat-toolbar.mat-primary.background]='#d12626'; but not working
I used this
.mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
code inside CSS code and it is working but I need to change the color dynamically.
I also need to update his colors
primaryColor
primaryLightColor
primaryDarkColor
secondaryColor
secondaryLightColor
secondaryDarkColor
primaryTextColor
secondaryTextColor
dont set the material color as primary or secondary then you can use ngStyle like this
<mat-toolbar [ngStyle]="{background:bgColor , color:'#fff'}">
<mat-toolbar-row>
<span>Main Toolbar</span>
</mat-toolbar-row>
</mat-toolbar>
bgColor is just a component property, when you don't set the color property the component don't have any class so it 's easy to change the style
demo 🚀
Dynamic styles
You should make the CSS properties as camelcase, for the font-size should be like this [style.fontSize.px]. You check other solutions from how-to-apply-dynamic-styles?.
Override styles
We can do so using by combining the :host with the ::ng-deep selector and most probably using for overriding Material styles:
:host ::ng-deep h2 {
color: red;
}
Custom theme for Angular Material
You can change a set of colors that will be applied to the Angular Material components.
https://material.angular.io/guide/theming
Without hack, it's not possible to change on the fly the colors of you angular application because the way to style your application using Angular Material is to use theming (that is described here https://material.angular.io/guide/theming) and your theming scss files will be compiled to css at build time.
I think the only hack to change colors of your app on the fly is to identify the hex color that you want to change (for primary, secondary, etc...) and you rewrite your style tag in your document using serch / replace.
But keep in mind that Angular Material is not designed to let user change theme and colors because they provide palette and hue that have been designed to provide good contrast and best practice regarding UX. That's why the solution I give you is really a hack.
the matrial dynamic color will be possible if the main set by css variable instaid of static hex values ,someone already publish a library to solve this by overwrite the main color to be used by css variables.
1️⃣ install angular-material-css-vars library
npm i angular-material-css-vars -S
2️⃣ import MaterialCssVarsModule on app module
#NgModule({
imports: [
...
MaterialCssVarsModule.forRoot(),
],
...
})
export class AppModule {}
3️⃣ use this service 👉 MaterialCssVarsService to change angular material main color like primary ,secondary, warm...
export class component {
constructor(public materialCssVarsService: MaterialCssVarsService) {
const hex = "#3f51b5"; // set default color color
this.materialCssVarsService.setPrimaryColor(hex);
}
setPrimaryColor(color: string) {
this.materialCssVarsService.setPrimaryColor(color);
}
}
you need to remove any existing #import '~#angular/material/theming'; from your main stylesheet file.
👉 demo 🧙♂️
you may check this question create angular material theme with css variables for more help
I am using an external panel component which would open on a button click.It has default width and other style properties.Is there any way I can override the width of the panel and used as responsive one .what i want to achieve is programmatically change the width of the panel in my components .
For example,
In my app.component.html iam using the panel container inside app.component.html
panel-container
How can i attach a custom class
panel-container class
="panel-width"
In.css
.panel-width{
Width:500 px
}
Without changing angular default view encapsultion
You can use :host::ng-deep to style the external component.
:host::ng-deep .panel-container {
width: 500px;
}
It is deprecated since 2017, but there is no new way to do this if you do not want to change ViewEncapsulation. Source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Got the solution.
We can override the same in our parent CSS file itself.
Dont use ng deep as that s deprecated
Overwriting library styles in separate global styles — not scoped!
let's override the Angular Material tab style.
create angular material tab scss file in app > assets > scss > override > am_tab.scss
and import the am_tab.scss file in the styles.scss #import 'assets/scss/override/am_tab.scss'
// am_tab.scss
mat-tab-group {
&.mat-tab-group.mat- primary .mat-ink-bar {
background-color: red;
}
}
More read in this article
I am using Angular & Material v6 and I have a question about the application of a custom theme on entryComponents like dialog or snack bar.
Actually, I put the Roboto font on all component using the custom theme of material but it is not applied to my dialog or snack-bar.
You can find a stackblitz example here
As you can see, the Roboto font is correctly applied on my page but if you open the dialog, the Time New Roman is used instead...
I just:
fork the example of dialog from angular material website.
add a custom theme.scss (using Roboto) and include it in angular-cli.json
remove the global font-family in style.css
Any advises, explanations ?
Somewhere in your app you need to apply your typography to the application page body so that all components automatically inherit from it including the overlay component that holds the dialog. In the stackblitz demo, you commented that out to test your typography:
body {
/* font-family: Roboto, Arial, sans-serif; */
margin: 0;
}
So you either need to replace that in your theme file with something like:
body {
font-family: mat-font-family($custom-typography);
margin: 0;
}
Or (you can't do this when using stackblitz) use the Angular Material typography class in your main index.html page:
<body class="mat-typography">
...
</body>
Also, your typography configuration needs to define sizes and weight for all of the typography levels used by Angular Material. An easy way to simply modify the default configuration is using a SASS merge. For example:
$custom-typography: map-merge(
mat-typography-config(),
mat-typography-config(
$font-family: 'Roboto, sans-serif'
)
);
This takes your definitions and writes them over the default configuration, leaving anything you didn't re-define intact.
And you only need to call mat-core() alone as it will call angular-material-typography() which in turn calls mat-base-typography().
I'm trying to style the title of the title label in a Spark Window Application. I think if I can find the correct CSS selector I can set it but I haven't been able to find it.
WindowedApplication {
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
}
WindowedApplication > TitleBar {
fontSize: 24; /* this doesn't work */
}
Here is more info on the Spark Window Application,
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSacd9bdd0c5c09f4a-690d4877120e8b878b0-7fd8.html
Update:
It looks like the styles are defined inline in MacTitleBarSkin. So even if I could style them using CSS there is nothing more specific than inline styles. I tried to remove the styles in the MacTitleBarSkin but they don't seem to be removing. PS I'm using Flex 4.14RC.
The title from the WindowedApplication itself can not be changed programmatically. It is based on the OS settings.
If you do want to customize it, you will have to customize the complete application container (including close/maximize/minimize buttons).
You can achieve this by setting <systemChrome></systemChrome> to "none" in your application descriptor.
It looks like this will work but you have to copy the skins into your project and then remove the styles on the titleText label in MacTitleBarSkin:
windowChrome|MacTitleBarSkin s|Group s|Label#titleText {
fontSize: 12;
color: red;
}
See this post on how to import skins into your project.