Material-components-web: It is possible to import for example tab styles without typography styles?

Created on 3 Sep 2020  路  3Comments  路  Source: material-components/material-components-web

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!

Most helpful comment

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

All 3 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

traviskaufman picture traviskaufman  路  3Comments

robzenn92 picture robzenn92  路  4Comments

traviskaufman picture traviskaufman  路  3Comments

ronnieroyston picture ronnieroyston  路  3Comments

patrickrodee picture patrickrodee  路  3Comments