Skip to content

Commit 4b09a5b

Browse files
committed
fix(material-experimental/mdc-chips): make it easier to customize chip typography
Moves the typography styles of the chip to the root of the component so that it's easier to customize, similar to the non-MDC version.
1 parent 6b2b518 commit 4b09a5b

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use '@material/chips/chip-set' as mdc-chip-set;
44
@use '@material/theme/theme-color' as mdc-theme-color;
55
@use '@material/theme/color-palette' as mdc-color-palette;
6+
@use '@material/typography' as mdc-typography;
67
@use 'sass:color';
78
@use 'sass:map';
89
@use '../mdc-helpers/mdc-helpers';
@@ -80,7 +81,12 @@
8081
theming.get-typography-config($config-or-theme));
8182
@include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
8283
@include mdc-helpers.mat-using-mdc-typography($config) {
83-
@include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
84+
// Note that we don't go through MDC's typography mixin, because it assigns the styles to
85+
// an inner element which makes it difficult for clients to customize. Instead we apply the
86+
// same styles ourselves to the root.
87+
.mat-mdc-chip {
88+
@include mdc-typography.typography(body2, $query: mdc-helpers.$mat-typography-styles-query);
89+
}
8490
}
8591
}
8692

0 commit comments

Comments
 (0)