Skip to content

Commit 68a29ff

Browse files
committedJan 21, 2022
fix(material-experimental/mdc-core): make mat-option typography easier to override (#24247)
Related to internal b/215585751. Currently the typography styles for an option are set on `.mdc-list-item__primary-text` which is going to break existing overrides and may violate some linter checks. These changes restore the old behavior. (cherry picked from commit 09013d5)
1 parent c9ab38b commit 68a29ff

File tree

2 files changed

+15
-4
lines changed

2 files changed

+15
-4
lines changed
 

‎src/material-experimental/mdc-core/option/_option-theme.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@
5555
theming.get-typography-config($config-or-theme));
5656

5757
@include mdc-helpers.mat-using-mdc-typography($config) {
58-
// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
59-
// level. Class is repeated for increased specificity.
60-
.mat-mdc-option .mdc-list-item__primary-text {
58+
// MDC uses the `subtitle1` level for list items, but
59+
// the spec shows `body1` as the correct level.
60+
.mat-mdc-option {
6161
@include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
6262
}
6363
}

‎src/material-experimental/mdc-core/option/option.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,21 @@
6666
pointer-events: none;
6767
}
6868

69-
// Needs to be overwritten explicitly, because the style can
69+
// Needs to be overwritten explicitly, because the style can
7070
// leak in from the list and cause the text to truncate.
7171
.mdc-list-item__primary-text {
7272
white-space: normal;
73+
74+
// MDC assigns the typography to this element, rather than the option itself, which will break
75+
// existing overrides. Set all of the typography-related properties to `inherit` so that any
76+
// styles set on the host can propagate down.
77+
font-size: inherit;
78+
font-weight: inherit;
79+
letter-spacing: inherit;
80+
line-height: inherit;
81+
font-family: inherit;
82+
text-decoration: inherit;
83+
text-transform: inherit;
7384
}
7485
}
7586

0 commit comments

Comments
 (0)
Please sign in to comment.