Repository: mui/material-ui (TypeScript)
Date: 2019-10-02 08:05:12+00:00
Task type: Bug Fix

Issue:
[Box] boxShadow property is not flowing through
<!--- Provide a general summary of the issue in the Title above -->

The `boxShadow` property of `Box` is not showing up in HTML.

<!-- Checked checkbox should look like this: [x] -->
- [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior 🤔
Here's an example of using the `boxShadow` property. It should show up as `box-shadow` property in HTML.

```
<Box
      height={320}
      bgcolor="#E23838"
      color="#fff"
      boxShadow="inset 0px 4px 4px rgba(0, 0, 0, 0.25)"
      display="flex"
      flexDirection="column"
      justifyContent="center"
      alignItems="center"
    >
      <Typography variant="h1">Hello!</Typography>
</Box>

```

## Current Behavior 😯
All other properties show up, but `box-shadow` does not.

## Steps to Reproduce 🕹
Link: https://codesandbox.io/embed/box-shadow-issue-33o9g

## Your Environment 🌎
<!---
    Include as many relevant details about the environment with which you experienced the bug.
    If you encounter issues with typescript please include version and tsconfig.
-->

| Tech         | Version |
|--------------|---------|
| Material-UI  | v4.1.1  |
| React        |    16.8.6     |
| Browser      |    Chrome     |
| TypeScript   |   3.4.5      |
| etc.         |         |



Issue discussion:
Just looked at the examples. It appears that the `boxShadow` property is expected to be a number. I was looking at old type definitions that specified it as `React.CSSProperties`.

Would be nice to have a way to specify as a CSS string property.
@nareshbhatia Correct, this is a feature request, so far, the shadow should be coming from the theme when using an array. Now, I believe we can allow custom values:
```diff
diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js
index 1724c4e7b..72a007bff 100644
--- a/packages/material-ui-system/src/style.js
+++ b/packages/material-ui-system/src/style.js
@@ -26,7 +26,7 @@ function style(options) {
       if (typeof themeMapping === 'function') {
         value = themeMapping(propValueFinal);
       } else if (Array.isArray(themeMapping)) {
-        value = themeMapping[propValueFinal];
+        value = themeMapping[propValueFinal] || propValueFinal;
       } else {
```

This would make the behavior consistent between an object theme value and an array one. I'm 👍  for it.
On a side note, Bootstrap is removing the iconic jumbotron component https://github.com/twbs/bootstrap/pull/28876. It was probably influenced by Tailwind.
This is something people can reproduce here with:
```jsx
import React from "react";
import { Box, Typography } from "@material-ui/core";

export default function App() {
  return (
    <Box
      py={{ xs: 6, sm: 10 }}
      bgcolor="primary.main"
      color="primary.contrastText"
      textAlign="center"
    >
      <Typography variant="h1">Hello!</Typography>
    </Box>
  );
}
```

https://codesandbox.io/s/box-shadow-issue-vfg03

![Capture d’écran 2019-06-17 à 12 26 26](https://user-images.githubusercontent.com/3165635/59597879-25fc6600-90fb-11e9-8b8a-c89c68d32aef.png)

Hi, anyone mind if I try this one for hacktoberfest?
@flurmbo Please do 😁
@joshwooding @oliviertassinari, sorry could anyone explain what's wrong with @rbrishabh's PR for this? It looks like it allows strings to pass through the style function if the themeMapping is an array, similar to the current behavior for if the themeMapping is an object. Thanks
@flurmbo The changes look great, I don't know what happened! I think that adding a test to verify it would be perfect.

Solution patch:
diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js
--- a/packages/material-ui-system/src/style.js
+++ b/packages/material-ui-system/src/style.js
@@ -26,7 +26,7 @@ function style(options) {
       if (typeof themeMapping === 'function') {
         value = themeMapping(propValueFinal);
       } else if (Array.isArray(themeMapping)) {
-        value = themeMapping[propValueFinal];
+        value = themeMapping[propValueFinal] || propValueFinal;
       } else {
         value = getPath(themeMapping, propValueFinal) || propValueFinal;
 


Test patch:
diff --git a/packages/material-ui-system/src/style.test.js b/packages/material-ui-system/src/style.test.js
--- a/packages/material-ui-system/src/style.test.js
+++ b/packages/material-ui-system/src/style.test.js
@@ -81,6 +81,19 @@ describe('style', () => {
     });
   });
 
+  it('should fallback to value if theme value is an array and index missing', () => {
+    const output = boxShadow({
+      theme: {
+        shadows: ['none'],
+      },
+      boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.2)',
+    });
+
+    assert.deepEqual(output, {
+      boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.2)',
+    });
+  });
+
   const border = style({
     prop: 'border',
     themeKey: 'borders',