CODEWITHSUNDEEP
cssangularignite-uiignite-ui-angular
feargmac
feargmac

Reputation: 41

Best way to edit font in Igx Grid column cells

Can't find a good method for changing the font for all grids across the application. I know of [cellClasses] and [cellStyles] but it seems unnecessary to set these for every column on every page of the application. Is there a way to this in global styles? Thanks

Upvotes: 1

Views: 609

Answers (3)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

It's best if you use the typography mixins in your scss theming setup. This way you would modify the fonts for all components and not just individual grid cells. Take a look at this article, it explains how to modify everything related to typography:

https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography.html

Example with the font-family:

$my-type-scale: igx-type-scale();

@include igx-typography(
    $font-family: "'Roboto', sans-serif",
    $type-scale: $my-type-scale,
    $base-color: #484848
);

Upvotes: 0

Damyan Petev
Damyan Petev

Reputation: 1635

Indeed applying styles of every column (and cell) across multiple components is a bit excessive for what you are trying to do. Those are more geared towards custom conditional styling.

The grid and cells will normally inherit fonts, so it's super simple to change - you can add a rule scoped to the entire igx-grid or specifically the igx-grid-cell like so:

igx-grid-cell {
  font-family: monospace
}

Per Abdul's answer the main styles.scss is the likely candidate for the typography to apply app-wide (avoiding potential view encapsulation issues). Here's a quick example with the above applied: https://stackblitz.com/edit/grid-cell-font?file=src/styles.scss

Upvotes: 3

Abdul-Razak Adam
Abdul-Razak Adam

Reputation: 1128

Yes, I haven't work with Angular for a while however I remember you can have your global style settings in src/styles.css or src/styles.scssor src/styles.sass. Add your grids styles to this file and you should be good to go.

Here is a link to angular global-styles and angular File structure for more information.

Upvotes: 2

Related Questions