MUI - Change Button text color in theme - reactjs

Question

I'm having a problem with changing button text color directly in the MUI theme. Changing primary color + button font size works fine, so the problem isn't in passing the theme on. Here's my code:
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { lightBlue } from 'material-ui/colors';
import styled from 'styled-components';
const theme = createMuiTheme({
palette: {
primary: lightBlue, // works
},
raisedButton: {
color: '#ffffff', // doesn't work
},
typography: {
button: {
fontSize: 20, // works
color: '#ffffff' // doesn't work
}
}
});
const App = ({ user, pathname, onToggleDrawer }) => (
<MuiThemeProvider theme={theme}>
...
</MuiThemeProvider>
);
I also tried using an imported color instead of the #ffffff, but that had no effect either.
Anybody got any ideas?

Answer 1

This worked for me. The color we chose decided to have a dark button contrast color but white as contrast color looks arguably better:
const theme = createMuiTheme({
palette: {
primary: {
main: "#46AD8D",
contrastText: "#fff" //button text white instead of black
},
background: {
default: "#394764"
}
}
});

Answer 2

Solved it! This finally did the trick:
const theme = createMuiTheme({
palette: {
primary: lightBlue,
},
overrides: {
MuiButton: {
raisedPrimary: {
color: 'white',
},
},
}
});
So, you just have to use "overrides" and be explicit about the exact type of component you want to change.

Answer 3

When you set a color in your Button (e.g. <Button color='primary'), how the text color is applied depend on the variant of the Button:
text | outlined: Use the main color (e.g. primary.main) as the text color.
contained: Use the contrastText color as the text color and main color as the background color.
import { blue, yellow } from '#mui/material/colors';
import { createTheme, ThemeProvider } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: blue[500],
contrastText: yellow[500],
},
},
});
Live Demo
Related Answer
Change primary and secondary colors in MUI

Answer 4

This solution works for me
const theme = createMuiTheme({
overrides: {
MuiButton: {
label: {
color: "#f1f1f1",
},
},
},

Answer 5

This worked for me, e.g. for custom success and error colors:
// themes.ts
import { createTheme, responsiveFontSizes } from '#mui/material/styles';
// Create a theme instance.
let theme = createTheme({
palette: {
primary: {
main: '#F5F5F5', // Used elsewhere
},
success: {
main: '#11C6A9', // custom button color (seafoam green)
contrastText: '#ffffff', // custom button text (white)
},
error: {
main: '#C6112E', // custom button color (red)
},
},
});
theme = responsiveFontSizes(theme);
export default theme;
Then in your .jsx/.tsx just declare the Button color.
Success button:
<Button
variant="contained"
color="success"
>
Success button text
</Button>
And for the red button w/ outline:
<Button
variant="outlined"
color="error">
Danger button text
</Button>

Answer 6

From https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js#L200 you can see what can be set in the theme for various components, and on raisedButton you will see that color is the actually the button background and to set the text colour you will need to change textColor property instead.
const theme = getMuiTheme({
raisedButton: {
textColor: '#ffffff', // this should work
primaryTextColor: '#ffffff' // or this if using `primary` style
}
});
Its not exactly intuitive given that CSS color affects text rather than background, and it doesn't even match up with the properties for the component itself http://www.material-ui.com/#/components/raised-button which have props for backgroundColor and labelColor instead!!!