Material-ui: Using MuiThemeProvider throws "Failed prop type" for underlying comopnent

Created on 15 Mar 2019 · 2Comments · Source: mui-org/material-ui

[x] This is not a v0.x issue.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

I am using MuiThemeProvider to change the color of a Button component. I expect this to work without error

Current Behavior 😯

The color of the button is changed. However, the browser shows the error index.js:1446 Warning: Failed prop type: The following properties are not supported:className. Please remove them. This error does not show if I don't use the MuiThemeProvider. This error also does not show if I remove the className from the DeleteIcon.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/l39z882kkz

click the 'throw the error' button
watch the console. The error should appear there

Context 🔦

I am trying to make my button red

Your Environment 🌎

Bug tested and validated in Chrome and Firefox.

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.2 |
| React | v16.8.2 |
| Chrome | v73.0.3683.75 |
| Firefox | v65.0.2 |
| TypeScript | v3.2.4 |

bug 🐛 Dialog

Source

borremosch

Most helpful comment

This is an issue with DialogActions. You need a wrapping component that forwards the props to the button instead:

function DeleteButton(props) {
  const { iconClassName, ...buttonProps } = props;

  return (
    <MuiThemeProvider theme={deleteTheme}>
      <Button {...buttonProps} variant="contained" color="primary">
        Delete
        <DeleteIcon className={iconClassName} />
      </Button>
    </MuiThemeProvider>
  );
}

See https://codesandbox.io/s/qq97jvq83j.

This should be fixed on next.

eps1lon on 15 Mar 2019

👍2

All 2 comments

This is an issue with DialogActions. You need a wrapping component that forwards the props to the button instead:

function DeleteButton(props) {
  const { iconClassName, ...buttonProps } = props;

  return (
    <MuiThemeProvider theme={deleteTheme}>
      <Button {...buttonProps} variant="contained" color="primary">
        Delete
        <DeleteIcon className={iconClassName} />
      </Button>
    </MuiThemeProvider>
  );
}

See https://codesandbox.io/s/qq97jvq83j.

This should be fixed on next.

eps1lon on 15 Mar 2019

👍2

@eps1lon I confirm, the problem was fixed on the latest v4.0.0-alpha release.
@borremosch If you need a solution for v3. You can use a Wire approach, redirecting the injected properties to the right element: https://github.com/mui-org/material-ui/issues/12468#issuecomment-412238375.