Material-UI 更改默认颜色答案

【问题标题】：Material-UI Changing default colorMaterial-UI 更改默认颜色
【发布时间】：2019-02-27 08:54:48
【问题描述】：

如何更改默认颜色？我需要在 theme.js 中修改什么对象？

编辑

我想修改不是primary 或secondary 或error 的默认值（灰色）。

【问题讨论】：

material-ui.com/customization/themes
在不同的地方使用不同的灰色阴影，颜色来自主题的不同部分。请展示一个示例（CodeSandbox 特别有用），显示您想要覆盖的特定内容。

【解决方案1】：

我遇到了与 OP 类似的问题，特别是我想将默认按钮颜色从灰色更改为白色。问题评论者是正确的，每个组件都有自己特定的样式和颜色，而不是全局默认颜色。这些需要通过自定义主题覆盖。下面是覆盖Button's default class contained 的示例，通过创建theme override 来更改默认按钮颜色。 CONTANTS用于定义具体的颜色等

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import * as CONSTANTS from './Constants'

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: CONSTANTS.BLUE,
      // dark: will be calculated from palette.primary.main,
      contrastText: CONSTANTS.CONTRAST_TEXT,
    },
  },
  overrides:{
    MuiButton:{
      contained:{
        color: CONSTANTS.BLUE,
        backgroundColor: CONSTANTS.CONTRAST_TEXT,
        '&:hover': {
          backgroundColor: CONSTANTS.LIGHT_BLUE,
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            backgroundColor: CONSTANTS.CONTRAST_TEXT,
          },
        }
      }
    }
  }
});
interface IThemeProps{
  children:any;
}
export default function Theme(props: IThemeProps) {
  return (
    <ThemeProvider theme={theme}>
      {props.children}
    </ThemeProvider>
  );
}

并使用新主题：

import React from 'react';
import Theme from './Theme';
import { Header, Home } from './Components';

const App: React.FC = () => {
  return (
    <Theme>
      <Header>
        <Home />
      </Header>
    </Theme>
  );
}

export default App;

【讨论】：

因此，如果默认颜色是特定于给定组件的颜色，例如 Button 而不管主题如何，是否更具有语义意义，而不是覆盖 Button 的默认颜色来设置属性 '按钮的颜色'到例如默认情况下全局主要？（使用material-ui.com/customization/globals/#default-props - color: "primary"）试图理解“默认”颜色的含义。由于它不在调色板颜色设置中，我读它是因为它只是作为后备而不是用来修补的。

【解决方案2】：

const customTheme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          color: "red",
        },
      },
    },
  },
});

我在 Material UI 文档中找到了关于覆盖默认属性的信息

【讨论】：

【解决方案3】：

您需要修改主题中的调色板对象。

`palette: {
  primary: {
    light: palette.primary[300],
    main: palette.primary[500],
    dark: palette.primary[700],
    contrastText: getContrastText(palette.primary[500]),
  },
  secondary: {
    light: palette.secondary.A200,
    main: palette.secondary.A400,
    dark: palette.secondary.A700,
    contrastText: getContrastText(palette.secondary.A400),
  },enter code here
  error: {
    light: palette.error[300],
    main: palette.error[500],
    dark: palette.error[700],
    contrastText: getContrastText(palette.error[500]),
  },
},`

【讨论】：

我想修改不是主要或次要或错误的默认（灰色）。我可以吗？