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

【问题标题】：Material-UI - How to change default color for dark theme?Material-UI - 如何更改深色主题的默认颜色？
【发布时间】：2019-12-13 07:33:04
【问题描述】：

在 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 color 的情况并非如此，不知何故我无法使用相同的技巧覆盖它。

如何在深色模式下将颜色 #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
    }
  }
});

并用MuiThemeProvider 包裹Demo：

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

【问题讨论】：

请指出出现这种颜色的位置并显示渲染该部分页面所涉及的代码。包含一个 CodeSandbox 来展示您想要更改的颜色也很有帮助。
我刚刚添加了 CodeSandbox 示例
你还没有指出你试图影响哪个元素的颜色。
使用#424242颜色的SwipeableViews backgroundColor

标签： javascript reactjs themes material-ui

【解决方案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"
    }
  }
});

【讨论】：