Hi
I'm new in sass module system (use, forward, ...)
I use your lib like:
@use '~@material/theme' with (
$primary: $color-primary,
$secondary: $color-secondary,
);
// Material components
@use '~@material/tab-bar/mdc-tab';
@use '~@material/tab-bar/mdc-tab-bar';
@use '~@material/tab-scroller/mdc-tab-scroller';
@use '~@material/tab-indicator/mdc-tab-indicator';
@use '~@material/ripple/mdc-ripple';
I see that mdc-tab has unwanted typography styles.
Instead of manually override them, it's possible to import only needed stuff?
I read docs related to feature-targeting
// The above two @includes and the following @include would produce equivalent results:
@include my-component-core-styles(feature-targeting.without(animation));
But I don't have ideas how to make this with whole component.
Any ideas?
Thanks!
How I see this is not possible
//
// Private
//
@mixin base_($query: functions.all()) {
$feat-structure: functions.create-target($query, structure);
@include typography-mixins.typography(button, $query); // this is hadrcoded!
Maybe you make typography as feature like this?
@mixin base_($query: functions.all()) {
$feat-structure: functions.create-target($query, structure);
$feat-typography: functions.create-target($query, typography);
@include feature-targeting-mixins.targets($feat-typography) {
@include typography-mixins.typography(button, $query);
}
Hi there! I do believe this is possible using feature targeting, have you tried your example replacing animations with typography like this:
@include tabs.core-styles(feature-targeting.without(typography));
For more information on our supported feature-targeting features check out: https://github.com/material-components/material-components-web/blob/master/packages/mdc-feature-targeting/_feature-targeting.scss#L46
@include tabs.core-styles(feature-targeting.without(typography));
The main problem in this is that core-styles not exist if we use this kind of path
@use '~@material/tab/mdc-tab';
And the second problem is that use direct @include mixins.core-styles; inside.
Instead, I see we need to use path from _index.scss file
@use '~@material/feature-targeting/functions' as ft;
@use '~@material/tab/index' as tab;
@include tab.core-styles(ft.without(typography));
And it works!
Many thanks!
Most helpful comment
Hi there! I do believe this is possible using feature targeting, have you tried your example replacing
animationswithtypographylike this:For more information on our supported feature-targeting features check out: https://github.com/material-components/material-components-web/blob/master/packages/mdc-feature-targeting/_feature-targeting.scss#L46