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

Question

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

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

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

如果我想使用#121212而不是#212121的颜色#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
    }
  }
});

并用MuiThemeProvider包装Demo ：

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"
    }
  }
});