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

它起作用了，现在使用 #121212 作为颜色，替换了原本使用的 #212121。

但是对于颜色 #424242，我无法使用相同的方法进行覆盖。

在暗模式下，如何将使用 #424242 的颜色更改为其他颜色（例如 #000000）？

编辑：

CodeSandbox

在官方文档中的 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")
);

- Bens

---

请指出这种颜色出现的位置，并展示呈现页面该部分所涉及的代码。同时，提供一个 CodeSandbox 示例，演示您想要更改的颜色，这将非常有帮助。 - Ryan Cogswell

我刚刚添加了 CodeSandbox 示例。 - Bens

你还没有指明你想要改变颜色的元素。 - Ryan Cogswell

SwipeableViews的背景颜色使用#424242颜色。 - Bens

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

- Ryan Cogswell