Material-table: Invalid prop type: Invalid prop `color` of value `inherit`

[masbaehr]

I'm encountering this error lately (latest version of everything)

index.js:1375 Warning: Failed prop type: Invalid prop color of value inherit supplied to ForwardRef(FormControl), expected one of ["primary","secondary"].
in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
in WithStyles(ForwardRef(TextField)) (created by MTableToolbar)
in div (created by ForwardRef(Toolbar))
in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
in WithStyles(ForwardRef(Toolbar)) (created by MTableToolbar)
in MTableToolbar (created by WithStyles(MTableToolbar))
in WithStyles(MTableToolbar) (created by MaterialTable)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by Container)
in Container (created by MaterialTable)
in Provider (created by App)
in App (created by ErrorBoundary)
in ErrorBoundary (created by DragDropContext)
in DragDropContext (created by MaterialTable)
in MaterialTable

[sshanzel]

Can you provide more details? Ex: props being passed to material-table. It would greatly help to understand the concern. Thanks!

[masbaehr]

I've removed everything to this point and the error still happens (only on F5 page reload though strangely) If coming from react-router it doesn't happen

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';

function DynamoTable(props) {

  useEffect(() => {

  },[]);

  return (
    <React.Fragment> 

     <MaterialTable

         columns={[]}
         data={[]}

       />
    </React.Fragment>
  );
}

export default DynamoTable;

[masbaehr]

I think the error is caused by one of those:

https://github.com/mbrn/material-table/search?q=color%3D%22inherit%22&unscoped_q=color%3D%22inherit%22

Probably caused by some recent change which only permits "primary" or "secondary" as a color

Addition: Some time ago i did not have this errors so it can't be something in my code

[jadbox]

I'm also seeing this error with the recent material-ui update.

[phongnguyen91]

Facing the same problem

[DenisSel]

I have the same problem too

[DanielEgenolf]

I am facing the same problem. For me it looks like that the root cause of this issue is for instance the line 68 (color="inherit") in file material-table/src/components/m-table-toolbar.js. According to the material-ui documenation only the values "primary" or "secondary" are allowed. What do you think?

[Monfernape]

Facing same issue. Any updates?

[sebasegura97]

Im facing same issue...

[josephiznot]

I am facing same issue too. I reinstalled latest version of material-table and still nothing.

[josephiznot]

It is annoying to have that big warning in the console. But it atleast it is recognized and hopefully addressed in a later version. I will probably just ignore it for now. https://github.com/mui-org/material-ui/pull/17891#issuecomment-551993218

[sshanzel]

There is already an opened PR, let's just wait for it to be merged. Cheers everyone!

[ajayguru]

Downgrading @material-ui/core to 4.5.1 has worked for me!

[masbaehr]

Obviously - but this is far from being a reasonable solution ;-) I'd rather ignore it for now or create a temporary fork, fix the bug by removing the 'inherit' ocurrence and npm install it if you _really_ cant live with it.
Then when it's fixed you can revert to the official repo

[AdrienHarvel]

I'm facing some issue.
Any solution ?

[AdrienHarvel]

Hi,

Okay. Downgrade is the only solution at the moment.

---

De : Hansel Solevilla [e-mail]
Envoyé : mercredi 13 novembre 2019 08:30
À : mbrn/material-table [e-mail]
Cc : AdrienHarvel [e-mail]; Comment [e-mail]
Objet : Re: [mbrn/material-table] Invalid prop type: Invalid prop color of value inherit (#1293)

I'm facing some issue.
Any solution ?

Kindly check above comments.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/mbrn/material-table/issues/1293?email_source=notifications&email_token=ACRKAEWA57HMG2BWZ74IRV3QTOGH5A5CNFSM4JJRF442YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED453II#issuecomment-553246113, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACRKAEUEPNFJUKVEL4SIMWDQTOGH5ANCNFSM4JJRF44Q.

[sshanzel]

Hi, Okay. Downgrade is the only solution at the moment.
…
________________________________ De : Hansel Solevilla [e-mail] Envoyé : mercredi 13 novembre 2019 08:30 À : mbrn/material-table [e-mail] Cc : AdrienHarvel [e-mail]; Comment [e-mail] Objet : Re: [mbrn/material-table] Invalid prop type: Invalid prop color of value inherit (#1293) I'm facing some issue. Any solution ? Kindly check above comments. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#1293?email_source=notifications&email_token=ACRKAEWA57HMG2BWZ74IRV3QTOGH5A5CNFSM4JJRF442YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED453II#issuecomment-553246113>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACRKAEUEPNFJUKVEL4SIMWDQTOGH5ANCNFSM4JJRF44Q.

Yes, until the opened PR is merged. Thanks!

[jackHedaya]

Is there an expected release date for the version that will resolve this issue?

[subanandhini]

changing the dependencies version of material-ui/core in package.json helped me. actually the material core UI update is not supporting the color value as inherit downgrading the dependency will help to solve this error.

"dependencies": { "@material-ui/core": "~4.5.1"}

[hysmio]

changing the dependencies version of material-ui/core in package.json helped me. actually the material core UI update is not supporting the color value as inherit downgrading the dependency will help to solve this error.

"dependencies": { "@material-ui/core": "~4.5.1"}

Multiple others have suggested this, but downgrading @material-ui/core could include other breaking changes if users are using 4.5.2 or 4.6.1 features and thus isn't an ideal solution.

[masbaehr]

People please... probably the devs know that this can only be properly fixed withing mbrn/material-table. A downgrade of other components obviously is not the ideal solution.

If you really cant live with it or wait until the PR is merged and published i already posted a reasonable suggestion: Fork the repo, fix the bug yourself and import material-table from your on repo with npm install yourgithub/material-table. The only drawback is you need to keep it updated until a proper fix is released ;-)

[acsakshay]

changing the dependencies version of material-ui/core in package.json helped me. actually the material core UI update is not supporting the color value as inherit downgrading the dependency will help to solve this error.
"dependencies": { "@material-ui/core": "~4.5.1"}

Multiple others have suggested this, but downgrading @material-ui/core could include other breaking changes if users are using 4.5.2 or 4.6.1 features and thus isn't an ideal solution.

Alternatively, I would recommended to remove all instances of (color="inherit") in file node_modules/material-table/src/components/m-table-toolbar.js
(Note you will have to restart your application after this change)

Whenever a fix is available from publisher, you can then update the package and the file will be replaced with publisher's version.

[expelledboy]

The users here remind me of this one video: https://www.youtube.com/watch?v=cQHQIhJbeFo 😂

[sshanzel]

This was fixed at 8cda5e7

[ahaq0]

Not fixed, still getting it

[sshanzel]

Which version are you at? This was released at v1.54.1

[dschutte97]

I'm also still getting this error, I'm at v1.54.1. Removing the remaining color properties with the "inherit" value solves the problem for me.

[acsakshay]

My understanding is that the pull request for this error has been merged to the main repo branch, but not released as a version. So still the fix is to make manual changes.

[ahaq0]

Can someone please list out the manual steps? I messed up doing it. Thanks in advance, still new at this just getting used to things.

[masbaehr]

Ok, ill now post the easiest way there could be:

Go into your node_modules/material-table/dist/components/m-table-toolbar.js file
Then to line 124 change
remove or comment // color: "inherit",

save and restart app

Note: If you should do npm install again, you will probably have to repeat the step until the official version is out ;-)

Hopefully something will be released soon, each github mail arrives I'm thinking that one of the other issues is being addressed, but its away this one haha

[dmitriyslaym]

When should we expect this fix to be published on npm?

[sshanzel]

It will all depend on @mbrn from the author itself

[acsakshay]

Guys, I think everyone should read previous comments before posting any new comments.

Thanks.

[hrafaelveloso]

This is already done and pushed to master (commit: https://github.com/mbrn/material-table/commit/8cda5e7b208799ecc440fa15de92ef852c11a88d), so it will be solved in the next update.

[imjared]

This seems to be resolved with v1.54.2

[bryanSME]

This was fixed at 8cda5e7

v1.54.2 has this change

[OnkelTem]

God, finally.

Fortunately, I've run into this issue just two hours ago :)
My condolences to everybody who had been sufferring for that long!

UPDATE.

Oh, no, it HAS NOT BEEN FIXED! Just checked. Add a mere toolbar and see.

Oops, false alarm. It really works!
Thanks.

[hutber]

However v1.54.2 introduces a new breaking change with the date/fnc issue

[mbrn]

This seems as solved.

[unfrgivn]

@mbrn I still get this error about color="inherit" on release 1.57.2 when enabling toolbar: true in the options prop.

Apologize, I haven't had a chance to dig into it, but just in case others are experiencing the same thing

[Michal-Sh]

The same for me.
This PR could really help me.

[unfrgivn]

@mbrn any thoughts on this? Checks passed and it's basically augmenting a previously merged PR that missed two lines.