Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@material/data-table error invalid style

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

abhiomkarcommented, Oct 9, 2019

@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.

0reactions

xaniacommented, Oct 9, 2019

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

Top Results From Across the Web

Importing styling for material web component textfield gives error

I think there's something wrong with dispatching rules (including ... @use "@material/data-table/data-table"; @include checkbox.core-styles; ...

Angular Material Data Table: A Complete Example

A complete example of an Angular Material Data Table with server-side pagination, sorting, filtering, as well as a loading indicator.

angular-material-data-table-fixed-deselect-bug - npm

This module is an effort to implement Material Design data tables in Angular Material. Data tables are used to present raw data sets...

GwtMaterialDesign/gwt-material-addins - Gitter

Hi all. I use GWT Material Design version 1.6.2. My data grid layout looks fine on big desktop and i want to keep...

DataTable class - material library - Flutter - Dart API docs

flutter create --sample=material.DataTable.1 mysample. Dart ... void main() => runApp(const MyApp()); ... style: TextStyle(fontStyle: FontStyle.italic),.