Material-UI Changing default color - reactjs

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

Answer 3

You need to modify the palette object in the theme.
`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]),
},
},`