Customize color shadow by property or variant

[andreaposadino]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

The same shadow size can not be customized by color.

This means that if I want a boxShadow of elevation 4, for example, in blue for a component and in red for another I have to override the boxShadow style at all, without using theme.shadows.

the only solution so far, right now, it is to override two different elevations using the same size but with different color:

// reference to @mui/material/styles/shadows.js
const shadows = [
    'none',
  createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0),
  createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0),
  createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0),
  createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0, "yellow"), 
  createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0, "red"), // same size of shadows[4], but with different color 
....
];

I do not think it should be the right way for doing that.

My suggestion is to export a color manipulator (similar to alpha) for using the same size but with different color:

<Stack boxShadow={(theme) => shadowColor(theme.shadows(4), "red")}>

I have read other (closed) issues related to this (like this) but I have not found an exhaustive answer

Examples 🌈

No response

Motivation 🔦

No response

[steodor]

I'm also interested in a better solution to this.

[ngittlen]

Has there been any consideration of this in the past 2 years?