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().
Related
I'm using FontAwesome in the app and I've not installed PrimeIcons.
So now when I'm using the PrimeNg's tree, I don't have any "chevron" displayed to open/close each item.
I cannot find a way in a documentation to override it(like a lot of their other component.
How can I replace their pi pi-fw pi-chevron-down by something like fa-solid fa-chevron-down(same for the chevron-left)?
I'm not sure how to target a CSS element to then apply another css on it?
Or did I miss a way of customizing this element?
(it's ok if it's in a global style)
Your .scss file, maybe could be better to set only related to involved components:
:host ::ng-deep {
.pi {
font-family: 'FontAwesome';
}
.pi-chevron-down:before {
content:"\f107"
}
}
in order to override other icons, please refer to fontawesome related cheatsheet
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.
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 suspect this is more of a LESS question and may not be specific to Ant Design other than the way they implemented some of their components is preventing me from overriding or extending the styles.
Specifically, I want to change the font size and weight for the title area of the PageHeader component. Unfortunately, the component's style does not use the LESS variables defined in the default.less theme for these two settings. The source code can be found here: https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less
I have no issues changing the color, for instance, or any other variables defined in the theme but I am new to LESS and not sure how to go about overriding the styles defined for an individual component like this. Oh, and I don't want to use inline styles. We use this component in many places in our application, so I want to define the overrides in one place, once and have them be global for the application (like I can do with the theme variables).
So, how do I override the font-weight and font-size styles defined on lines 45 and 46 of the referenced file?
Here an example of how I have done it in my project:
Using .css file
Override the CSS class by .css/.scss and so on:
// Main layout where all antd componets used.
import './MyLayout.css';
/* MyLayout.css */
.ant-tooltip-inner {
background-color: white;
color: black;
}
Here I reversed all tooltips (default are black).
Using Styled-Components
Same like above just as CSS-JS:
const LayoutStyled = styled(Layout)`
height: 100vh;
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ant-layout-sider-light .ant-layout-sider-trigger {
border-right: 1px solid ${HCOLOR.border};
}
`;
Here I overrode all fonts and added the right border to antd sider trigger (default no border).
Conclusion
Find the css-class / css-property with dev-tools (Ctrl+Shift+C in Chrome) and override it as you like.
Use less files to apply the styling as mentioned in the antd docs here.
I am getting crisscross information and wanted to raise the issue here. I have read in some places the font size should be changed from the html element for example:
html { font-size: 14px }
And the bootstrap 4 rem values will update the text accordingly.
Interestingly if I keep the html element's font-size to its default and change the bootstrap variables to change the font size, am I doing something wrong?
For example:
html { font-size: 16px }
// Changing bootstrap variable to
$font-size-base: 0.875rem //instead of 1rem
With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.
It is now crystal that we will need to change $font-size-base which will directly change the root font-size.
I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.
REF: https://github.com/twbs/bootstrap/pull/24060
Caution about using just CSS override
using the supplied css example will not work for all aspects of bootstrap sizing.
The compiled result of scss uses the $font-size-base variable to size many things and may be used in more areas in the future.
List of sized elements
dropdown font
button font
popover font
input-group font
forms font
reboot font
-------------- Example SCSS --------------
This is an example for your scss files, note that you need to define the $font-size-base BEFORE including bootstrap in your main scss file. In this case, the app.scss file is the one being compiled.
app.scss
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables -- this is where you defined the variables
// BEFORE importing bootstrap which will use it's
// defaults if the variable is not predefined.
#import "variables";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// #import "datatables";
#import "datatables.min";
_variables.scss
// Body
$body-bg: #ffffff;
// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
Bootstrap defines base font-size in it's _reboot.scss as
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}
NOTE:- Never change default values into frameworks files always modify values using custom css/js files.
so in order to change your font-size to 14px use this in your own style.css(custom css file)
body {
font-size: 0.875rem;
}
Here is the working fiddle
use !important you are not able to see your changes to override your change on default.
In your custom.scss file do like this:
$custom-variable:0.875rem;
Then use it like this:
#import "./src/scss/_modules/custom";
#import "./bower_components/bootstrap/scss/bootstrap";
body {
font-size:$custom-variable;
}
I'd suggest you to update directly the html {font-size: 16px} property instead of changing Bootstrap's $font-size-base, for several reasons:
html's font size will be directly used in calculating final font size. There's no benefit to use an "intermediary", that is, body that is being adjusted by Bootstrap's $font-size-base.
Bootstrap's SCSS system calculate heading size etc using $font-size-base, so all Bootstrap affected CSS rule will be affected, which includes body (set into $font-size-base$).
However, browser calculate any CSS font size rule in rem relative to html {font-size}, not from $font-size-base affected elements (like body).
Setting html {font-size} using px will affect any rem value, both inside and outside Bootstrap affected elements, if this is what you want to achieve.
Conversely, if you only want to set sizes for Bootstrap-affected-elements, do set the $font-size-base relative to html {font-size}, so CSS elements outside of Bootstrap will not be affected. But I'd say this is more of an edge case, instead of the norm.
Note:
If you're setting $font-size-base or any other Bootstrap variables, you don't have to modify variables.scss file. You should define variables before importing node_modules/bootstrap/scss/variables and other Bootstrap files, so your values got used instead of !default values set in Bootstrap. The advantages: no need to edit the whole variables.scss file.