Mui Theme support question (or bug)

[mattcorner]

Bug Report

Describe the bug

Trying to override some of the snackbar colour (because they were changed in the last release without warning). According to the doc I should be able to override the styles in my Mui theme, but they never seem to be applied. What am I doing wrong or is the component overriding my styles?

As an aside, maybe some examples of theme overriding in the doc would be useful.

Steps to reproduce

1. https://codesandbox.io/s/withered-pond-d05m6?file=/src/App.js
2. Add any file > 1 byte
3. Snackbar background colour should be blue but shows red.

[panz3r]

Hi @mattcorner ,

Thanks for your feedback, I had a look at the CodeSandbox you provided and made some testing.

It turned out that Material UI is trowing an error about how the override is done

Material-UI: The `MuiDropzoneSnackbar` component increases the CSS specificity of the `error` internal state.
You can not override it like this: 
{
  "error": {
    "backgroundColor": "blue"
  }
}

Instead, you need to use the $ruleName syntax:
{
  "root": {
    "&$error": {
      "backgroundColor": "blue"
    }
  }
}

https://material-ui.com/r/pseudo-classes-guide

But the proposed code also is not working so I suppose we'll need to change the className used by material-ui-dropzone to avoid collision.

In the meanwhile you can override the error state color like this

const theme = createMuiTheme({
  palette: {
    error: {
      main: '#00F'
    }
  },
});

notice however that this will change the color for every component relying on the theme.palette.error.main color.