I'm having a problem with changing the button text color directly in the Material UI theme. Changing the 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?
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.