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）的使用。

编辑：

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

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

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

1 个答案: