Material-components-web: @material/data-table error invalid style

[horprogs]

Bug report

I use these packages

"@material/button": "^3.0.0"
"@material/data-table": "3.0.0-alpha.0"
"@material/dialog": "^3.0.0"
"@material/menu": "^3.0.0"
"@material/ripple": "^3.0.0"
"@material/tab-bar": "^3.0.0"
"@material/textfield": "^3.0.0"

And then I import @material/data-table/mdc-data-table I got build error

ERROR in ./app/client/components/Table/Table.vue?vue&type=style&index=1&lang=scss& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./app/client/components/Table/Table.vue?vue&type=style&index=1&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

      @error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
     ^
      Invalid style: 'inherit'. Choose one of: primary, secondary, background, surface, error, on-primary, on-secondary, on-surface, on-error, text-primary-on-background, text-secondary-on-background, text-hint-on-background, text-disabled-on-background, text-icon-on-background, text-primary-on-light, text-secondary-on-light, text-hint-on-light, text-disabled-on-light, text-icon-on-light, text-primary-on-dark, text-secondary-on-dark, text-hint-on-dark, text-disabled-on-dark, text-icon-on-dark
      in node_modules/@material/theme/_mixins.scss (line 89, column 7)
 @ ./app/client/components/Table/Table.vue?vue&type=style&index=1&lang=scss& (./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js??ref--4-2!./node_modules/vue-loader/lib??vue-loader-options!./app/client/components/Table/Table.vue?vue&type=style&index=1&lang=scss&) 4:14-317 14:3-18:5 15:22-325
 @ ./app/client/components/Table/Table.vue?vue&type=style&index=1&lang=scss&
 @ ./app/client/components/Table/Table.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./app/client/components/Main.vue?vue&type=script&lang=js&
 @ ./app/client/components/Main.vue?vue&type=script&lang=js&
 @ ./app/client/components/Main.vue
 @ ./app/router.js
 @ ./app/app.js
 @ ./app/entry-client.js
 @ multi ./app/entry-client.js

Actual behavior

Build error

Expected behavior

Build successful

Your Environment:

| Software | Version(s) |
| ---------------- | ---------- |
| Browser | -
| Operating System | MacOS 10.14.9
| Node.js | 10.16.0

[Pupix]

Same problem here. It comes from
https://github.com/material-components/material-components-web/blob/9ffebcfa9f09954dd2af4c002d01b3f8c131f4eb/packages/mdc-data-table/_variables.scss#L26-L27
https://github.com/material-components/material-components-web/blob/9ffebcfa9f09954dd2af4c002d01b3f8c131f4eb/packages/mdc-data-table/_mixins.scss#L53-L54
and https://github.com/material-components/material-components-web/blob/9ffebcfa9f09954dd2af4c002d01b3f8c131f4eb/packages/mdc-data-table/_mixins.scss#L123-L141

Because mdc-theme-prop mixin doesn't support inherit

[moog16]

Try again in version 3.1.0 - this was release on previously this week.

[horprogs]

Yes, it works! Thank you!!

[xania]

I tried 3.2.0 and then 3.1.0 myself and both fail with same "error invalid style"

[abhiomkar]

@xania Make sure that you're using latest version of @material/theme (3.1.0 or latest version). It is likely that the @material/data-table node module is still depending on older version of @material/theme in your build setup.

[xania]

@abhiomkar that's it, I was somehow still using 1.1 version of @material/theme