Material-ui: Cannot remove shadows when defining a custom theme

[solemnify]

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Hello, thanks for your time as always. I love the new version of MUI and it has been working great for a project that I am working on!

When defining a custom theme, I should be able to override and remove the shadows globally. With the changes specified in beta v10( https://github.com/callemall/material-ui/pull/8188 ) it looks like any custom theme specified shadows will be merged into the default shadow list, instead of overriding it. If possible, there should still be a way to replace/override the entire shadow array, as this was the case for pre-v10 beta.

Current Behavior

Before beta v10, I was able to override shadows by supplying an empty array:

return createMuiTheme({
    overrides,
    palette,
    typography,
    shadows: []
  });

Steps to Reproduce (for bugs)

1. Create a theme object with no shadows defined
2. You will notice that shadows are still prevalent on any component

Context

This issue has affected my ability to remove shadows from my theme.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | beta v10 |
| React | 15.5.4 |
| browser | Chrome v60 |
| etc | |

[oliviertassinari]

You can still do the following:

const theme = createMuiTheme({
  overrides,
  palette,
  typography,
});

theme.shadows = [];

[solemnify]

Thank you for pointing that out, I appreciate it.

[mfolnovic]

@oliviertassinari is this behaviour documented somewhere in documentation? I couldn't find it. 😢

[oliviertassinari]

@mfolnovic It's not documented explicitly. The theme is a raw JavaScript object. Any mutation can be performed on it (as long as it's still containing the required values).

[afparsons]

From what I can see, theme.shadows = []; will completely disable shadows on all components using theme. What about disabling shadows on select components? (ex: AppBar itself becomes shadowless, but component in AppBar has a shadow.)

[akuji1993]

Doesn't work when working with Typescript.

[stefanoTron]

@akuji1993, has anyone solved this with Typescript?

[eps1lon]

Doesn't work when working with Typescript.

@akuji1993 @littletower You probably mean that the type checker doesn't let this pass? If so please open a separate issue and follow the template.

[blmoore]

Seems to work in typescript:

theme.shadows = [] as unknown as Theme["shadows"];

[fgeorgsson]

```
export const theme = createMuiTheme({
overrides: {
MuiButton: {
contained: {
boxShadow: 'none',
}}}});

[k7moorthi]

Seems to work in typescript:

theme.shadows = [] as unknown as Theme["shadows"];

Sometimes throws the following error in console (x is a number. In my case it's 4):
Material-UI: this elevation x is not implemented.

To resolve it, I used your solution combined with this post as follows:
Array<string>(25).fill('none') as Theme['shadows']