Material-UI Changing default color

Question

How can I change the default color ? What is the object I need to modify in the theme.js ?

EDIT

I want to modify the defaut (grey color) who isn't primary or secondary or error.

Answer 1

I came across a similar issue to the OP, specifically I wanted to change the default Button color from grey to white. The question commenters are correct, each component has its own specific styles and colors versus a global default color. These need to be overridden via a custom theme. Below is an example of overriding Button's default class contained, by creating a theme override to change the default button color. CONTANTS is used to define the specific colors, etc.

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

And to use the new theme:

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;

Answer 2

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

I found on Material UI documentation about overriding the default properties