Material-UI - How to change default color for dark theme?

Question

In Material-UI when changing the theme to dark, some components turn its color to #424242 and some other to #212121.

It seems those colors come from theme.palette.grey:

theme.palette.grey[800]: '#424242'
theme.palette.grey[900]: '#212121'

What if I want to use the color of #121212 instead of #212121?

I did this:

const theme = createMuiTheme({
  palette: {
    grey: {
      900: '#121212'
    },
  },
});

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <MyComponent/>
    </MuiThemeProvider>
  );
}

And it works, components that used #212121 now it using #121212 as its color.

But it's not the case for #424242 color, somehow I couldn't override it using the same trick.

How can I change the use of color #424242 with other color (e.g #000000) in dark mode.

EDIT:

CodeSandbox

from official docs code in index.js I just add this:

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const themeX = createMuiTheme({
  palette: {
    type: "dark",
    grey: {
      800: "#000000", // overrides failed
      900: "#121212" // overrides success
    }
  }
});

And wrap Demo with MuiThemeProvider:

ReactDOM.render(
  <MuiThemeProvider theme={themeX}>
    <Demo />
  </MuiThemeProvider>,
  document.querySelector("#root")
);

Answer 1

In demo.js is the following code:

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500,
  },
}));

This is controlling the background color for the div that wraps the entire content. In order to control this, you need to either specify a different color directly in the makeStyles call or you need to customize theme.palette.background.paper. For instance:

const themeX = createMuiTheme({
  palette: {
    type: "dark",
    grey: {
      800: "#000000", // overrides failed
      900: "#121212" // overrides success
    },
    background: {
      paper: "#000000"
    }
  }
});