Elevation shadow customization through custom theme

[gmltA]

I want to tweak CSS shadows for particular elevation levels.
In theming guide there is shadows array property of theme object which holds style sets for all 24 elevation levels. But if I want to change any of them, as I understand, I have to provide full array of 24 elements. It would be great to somehow avoid using complete set of shadows and use only custom properties:

e.g. custom shadow for elevation = 24
theme = { shadows: { 24: '10px 10px rgba(0,0,0,0.2)' } }

But the problem is even when I copy-paste shadows array from Material-UI and replace some values there it doesn't affect elevation decoration of components. They still use default values from the library.
Am I doing something wrong? Or is there any way to change default shadows for different elevation values?

Tech	Version
Material-UI	1.0.0-beta.11
React	15.6.1
browser	all

[oliviertassinari]

You can always tweak the theme object after calling createMuiTheme(). Please provide a reproduction case if this doesn't work.

[gmltA]

I'm trying to create red shadow beneath AppBar

const theme = createMuiTheme({
  shadows: [
// 23 default values of 'shadows' array from https://material-ui-1dab0.firebaseapp.com/customization/themes/
    '0px 11px 15px -7px red,0px 24px 38px 3px red,0px 9px 46px 8px red', // 24th value
  ],
});

<MuiThemeProvider theme={theme}>
  <AppBar elevation={24}>
    // content
  </AppBar>
</MuiThemeProvider>

But shadow style remains the same as it is by default.

[oliviertassinari]

I have just tried, the following work as expected:

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import Paper from 'material-ui/Paper';

const theme = createMuiTheme();

theme.shadows[24] = theme.shadows[4];

function Shadows() {
  return (
    <MuiThemeProvider theme={theme}>
      <Paper elevation={24}>24</Paper>
    </MuiThemeProvider>
  );
}

export default Shadows;

[std4453]

Just met this when trying to set only one entry of the shadows array.

The write-after-createMuiTheme solution works just fine, however it's not a perfect one. I'm wondering whether createMuiTheme can do some merging with the default shadows array, maybe by providing shadows: { 1: 'xxx' }. Currently doing so lets the shadows field in the theme object become an object instead of an array, resulting in further issues.

Not sure whether this should be a new issue, thx for your attention.

[oliviertassinari]

@std4453 You can do the customization on the theme returned by createMuiTheme(). It's a plain JS object. This issue is 3 years old, we did couple iterations on the merge logic. I believe it's correct in v4/v5.

[maqsood1ahmed]

Hi you can customize any of shadow using ES6 spread operator.

const theme = createMuiTheme({
  shadows: [...createMuiTheme({}).shadows.map((shadow, i) => (
    i === 1 ? '0 0 18px 0 rgba(9, 32, 46, 0.2)' : shadow
  ))],
});

[scasdev]

@maqsood1ahmed brilliant. Thank you so much!