reactjs - Material-UI 更改默认颜色

Question

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

编辑

我想修改默认值(灰色)，该值不是主要、次要或错误。

Answer 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;