[Box] boxShadow property is not flowing through

[nareshbhatia]

The boxShadow property of Box is not showing up in HTML.

• This is not a v0.x issue.
• I have searched the 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 🌎

Tech	Version
Material-UI	v4.1.1
React	16.8.6
Browser	Chrome
TypeScript	3.4.5
etc.

[nareshbhatia]

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.

[oliviertassinari]

@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 --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.

[oliviertassinari]

On a side note, Bootstrap is removing the iconic jumbotron component twbs/bootstrap#28876. It was probably influenced by Tailwind.
This is something people can reproduce here with:

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

[flurmbo]

Hi, anyone mind if I try this one for hacktoberfest?

[joshwooding]

@flurmbo Please do 😁

[flurmbo]

@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

[oliviertassinari]

@flurmbo The changes look great, I don't know what happened! I think that adding a test to verify it would be perfect.