CODEWITHSUNDEEP
javascriptarraysreactjsthemesmaterial-ui
user10782250
user10782250

Reputation: 247

Override Material UI shadow array values in theme overrides using createMuiTheme

I have a custom theme for my toolkit and am using createMuiTheme to override the palette, fonts, etc. I am attempting to slim down the shadow array in the theme object which is used for various components, which by default comes with 25 values. I only want to offer two options in my shadow array to keep things simple.

When I pass the two values I want to support for shadows into the array I get a warning from MUI: 

index.js:1437 Warning: Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.

So i've gotten around this by adding setting "none" for the other shadows that I don't want set values for like so: 

let theme = createMuiTheme({
  palette: {
    common: {
      black: "#000",
      white: "#fff",
      ...
    },
  typography: {
    fontFamily: opensans,
    ...
  },
  shadows: [
    `0px 0px 6px 0px ${hexa(grey[500], 0.25)}`,
    `0px 0px 6px 0px ${hexa(grey[500], 0.55)}`,
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
    "none",
   etc...
  ]
});

This is not ideal since it bloats the theme a ton which developers use as a ref to see whats available to use, is there a way around this?

My ideal state is representation in the theme object that looks like this but with no console warnings:

let theme = createMuiTheme({
  palette: {
    common: {
      black: "#000",
      white: "#fff",
      ...
    },
  typography: {
    fontFamily: opensans,
    ...
  },
  shadows: [
    `0px 0px 6px 0px ${hexa(grey[500], 0.25)}`,
    `0px 0px 6px 0px ${hexa(grey[500], 0.55)}`,
  ]
});

Upvotes: 4

Views: 3382

Answers (2)

mihir bagchi
mihir bagchi

Reputation: 19

Actually you shouldn't be doing this as by this way what you are doing is that you are removing all the other default shadows given by material ui, this will make some components behave in some weird way, as it won't find the shadow, as you have overridden them.

Better approach is to add another customShadow key in the theme, and add your custom shadows to it. This way you are no longer overriding the default shadows that comes loaded with material ui and all the components that uses those shadows will work without any problem.

I hope you got your answer

Upvotes: -1

zeropaper
zeropaper

Reputation: 584

You probably could do something like:

const makeTheme = () => {
  const original = createMuiTheme();
  return {
    ...original,
    // override shadows based on the original array
    shadows: original.shadows.map(() => 'none'),
  };
};

const theme = makeTheme();

Upvotes: 1

Related Questions