Material-UI - 如何更改深色主题的默认颜色？

Question

在 Material-UI 中，当将主题更改为深色时，一些组件将其颜色变为 ，#424242而另一些则变为#212121。

这些颜色似乎来自theme.palette.grey：

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

如果我想使用#121212代替的颜色#212121怎么办？

我这样做了：

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

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

它可以工作，#212121现在使用#121212它的组件用作它的颜色。

但#424242颜色的情况并非如此，不知何故我无法使用相同的技巧覆盖它。

如何在暗模式下更改颜色#424242与其他颜色（例如#000000）的使用。

编辑：

代码沙盒

来自 index.js 中的官方文档代码我只是添加了这个：

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

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

并Demo用MuiThemeProvider：

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

Answer 1

中demo.js有以下代码：

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

div这是控制包裹整个内容的背景颜色。为了控制这一点，您需要直接在makeStyles调用中指定不同的颜色，或者需要自定义theme.palette.background.paper. 例如：

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